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

Question

мне нужно отобразить div с атрибутом data-price, при установке флажка который содержит диапазон diff.

я знаю, как получить значения из флажка и как работать с атрибутом data, но здесь каждый div имеет данные-прайс и нужно показать div с data-price из одного из выбранных диапазонов.

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.h > .a1').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.h > .a1[data-ftype=' + $(this).data("ftype")+ ']').show();
            $('.h > .a1[data-shape=' + $(this).data("shape")+ ']').show();

            //here i need price filter


        });
    } else {
        $('.h > .a1').show();

    }
  });

<input class="filter" data-ftype="full" type="checkbox" id="checkbox1">ftype full
<input class="filter" data-ftype="half" type="checkbox" id="checkbox2">ftype half
<input class="filter" data-ftype="without" type="checkbox" id="checkbox3">ftype without

<input class="filter" data-shape="round" type="checkbox" id="checkbox4">round
<input class="filter" data-shape="cateye"type="checkbox" id="checkbox5">cateye
<input class="filter" data-shape="square" type="checkbox" id="checkbox6">sqaure

<input class="filter" data-min="1000" data-max="2000" type="checkbox" id="checkbox13">price1
<input class="filter" data-min="3000" data-max="4000" type="checkbox" id="checkbox13">price2
 <input class="filter" data-min="5000" data-max="10000" type="checkbox" id="checkbox13">price3


<div class="h"> 
<div class="a1" data-shape="round" data-ftype="full"  data-price="1500" >a1</div>
<div class="a1" data-shape="cateye" data-ftype="half" data-price="4000" >a2</div>
<div class="a1" data-shape="round" data-ftype="without" data-price="1000" >a3</div>
<div class="a1" data-shape="square" data-ftype="full" data-price="3500" >a4</div>
<div class="a1" data-shape="round" data-ftype="half" data-price="2500" >a5
</div>
</div>

Answer 1

Нет встроенного селектора для сравнения значений «больше чем» и «меньше чем». Вам нужно будет отфильтровать элементы вручную в зависимости от того, какие флажки установлены.

Вот рабочая демонстрация. Сначала мы скрываем все div, используя .hide(), затем мы используем filter(), чтобы решить, какие из них .show(). Внутри обратного вызова фильтра мы возвращаем результат Array.prototype.some(), который гарантирует, что хотя бы один из элементов, через которые мы итерируем, удовлетворяет условию, возвращенному в обратном вызове. (.get(), когда вызывается без определенного индекса, просто преобразует коллекцию jQuery в массив элементов, которые мы можем использовать с .some()).

Я также добавил else оператор, чтобы показать все div, когда все флажки сняты.

$('input[type="checkbox"]').click(function() {
  var checkedRanges = $('input[type="checkbox"]:checked');
  if (checkedRanges.length) {
    $(".h > .a1[data-price]").hide().filter(function() {
      $div = $(this);
      var divPrice = parseFloat($(this).data("price"))
      return checkedRanges.get().some(function(cb) {
        var minprice = parseFloat($(cb).data("min"));
        var maxprice = parseFloat($(cb).data('max'));
        return divPrice >= minprice && divPrice <= maxprice;
      });
    }).show();


  } else {
     $(".h > .a1[data-price]").show()
     }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>1000 - 2000: <input class="filter" data-min="1000" data-max="2000" type="checkbox" id="checkbox13">
3000 - 4000: <input class="filter" data-min="3000" data-max="4000" type="checkbox" id="checkbox13">
5000 - 10000: <input class="filter" data-min="5000" data-max="10000" type="checkbox" id="checkbox13">
</p>
<div class="h">
  <div class="a1" data-price="1500">1500</div>
  <div class="a1" data-price="4000">4000</div>
  <div class="a1" data-price="1000">1000</div>
  <div class="a1" data-price="3500">3500</div>
  <div class="a1" data-price="2500">2500</div>
</div>