Tengo una pregunta sobre Array en jQuery.
Abajo están mis códigos.
Tengo etiquetas div de la misma clase, pero diferentes valores en las etiquetas de intervalo.
Utilizo la barra de rango de entrada para cambiar el valor, si el valor de las etiquetas de rango es menor que el valor de la barra de rango.
Las etiquetas div correspondientes desaparecerán.
Podría obtener los mismos números de matriz de clase, pero no puedo comparar.
¿Cómo modifico mi código?
$('#myRange').change(function() { let Price1 = parseInt($('#myRange').val()); let Price2 = []; $('.price').each(function(index, el) { Price2[index] = parseInt(el.innerHTML); }); if (Price2 > Price1) { $('.col').fadeOut(); //console.log('yes'); } else { $('.col').fadeIn(); //console.log('no'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange"> <div class="col"> <span class="price">10</span> </div> <div class="col"> <span class="price">20</span> </div> <div class="col"> <span class="price">30</span> </div> <div class="col"> <span class="price">40</span> </div> <div class="col"> <span class="price">50</span> </div>Debe comparar el valor que el usuario seleccionó con el valor del precio de cada artículo ( .col ).
Aquí hay una versión modificada de su ejemplo (específicamente el código JS), con una ventaja adicional de verificación antes de que el usuario haga algo (y algunos comentarios de código).
// check columns visibility on load checkPriceRange(parseInt($('#myRange').val())); // event listener for the range slider $('#myRange').change(function() { // get the user value let priceRange = parseInt($('#myRange').val()); // call the comparison function, and update the UI accordingly checkPriceRange(priceRange); }); function checkPriceRange(priceRange) { // iterate through every price item $('.price').each(function(index, el) { // get the parent of the price item, as that's what will be hidden let $column = $(this).closest('.col'); // get the price of the price item let price = parseInt(el.innerHTML); // compare the price with what the user selected if (priceRange >= price) { $column.fadeIn(); } else { $column.fadeOut(); } }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange"> <div class="col"> <span class="price">10</span> </div> <div class="col"> <span class="price">20</span> </div> <div class="col"> <span class="price">30</span> </div> <div class="col"> <span class="price">40</span> </div> <div class="col"> <span class="price">50</span> </div>Soy consciente de que esta respuesta no aborda su pregunta sobre la comparación de matrices con jQuery, pero en este caso no hay razón para complicar las cosas con una matriz. Y dado que está usando .each() , puede aprovechar $(this).
...la devolución de llamada se activa en el contexto del elemento DOM actual, por lo que la palabra clave this se refiere al elemento. Documentos de jQuery
Aquí hay una versión de trabajo simplificada:
$('#myRange').change(function() { let Price = parseInt($('#myRange').val()); $('.price').each(function(index, el) { if (parseInt(el.innerText) > Price) { $(this).parent().fadeOut(); } else { $(this).parent().fadeIn(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange"> <div class="col"> <span class="price">10</span> </div> <div class="col"> <span class="price">20</span> </div> <div class="col"> <span class="price">30</span> </div> <div class="col"> <span class="price">40</span> </div> <div class="col"> <span class="price">50</span> </div>