Как с помощью Jquery или JavaScript сделать сравнение одного числа с многими?

146

25 июня 2019, 17:50

Есть:

<input type="text" class="pl_all_filter" value="40">

И есть список блоков с цифрами:

<div>10</div>
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
<div>60</div>

При изменении значения в input нужно, чтобы с сайта скрывались блоки, у которых число меньше чем то, что написано в input.

$('.pl_all_filter').on('input',function(e){   
    var input_val = parseInt($(this).val());    
    $('.line_block_planirovki .simplebar-content > div').each(function() {  
        var pl_all = parseInt($(this).find('.all_pl_vn').text());
});

Вот какой код на jQuery получилось написать.

По логике:

берем то число, что в input,
обходим все div, берем числа с них,
и нужно как то сравнить одно число с множеством чисел,
и срыть те блоки, где значения меньше чем в input.

Answer 1

$('.pl_all_filter').on('input',function(e){   
  var input_val = +$(this).val();    
  $('.line_block_planirovki .simplebar-content > div').each(function() {  
    var pl_all = +$(this).find('.all_pl_vn').text();
    if (pl_all >= input_val)
      $(this).show();
    else
      $(this).hide();
  });
});

Answer 2

Внутри each ключевое слово this будет указывать на конкретный div, нужно взять у него текст, и затем, например используя метод toggle скрыть или показать этот элемент.

Этот метод может принимать булевское значение, указывающее скрыть или показать элемент, поэтому в него можно просто передать результат сравнения, например

$('.pl_all_filter').on('input', function(e) { 
  var input_val = parseInt($(this).val()); 
  $('.simplebar-content > div').each(function() { 
    var pl_all = parseInt($(this).text()); 
 
    $(this).toggle(input_val > pl_all); 
 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="text" class="pl_all_filter" value="40"> 
 
<div class="simplebar-content"> 
 
  <div>10</div> 
  <div>20</div> 
  <div>30</div> 
  <div>40</div> 
  <div>50</div> 
  <div>60</div> 
 
</div>