объединение нескольких jquery-фильтров (ползунок пользовательского интерфейса, флажок)

Question

Я хочу страницу, на которой я покажу кучу div, отобразится div, основанная на выборе, сделанных на странице.

Здесь я использую два типа фильтров, то есть, JQuery UI слайдер (диапазон цен) и флажок

Оба работают отлично отдельно, но я хочу, чтобы объединить оба

I» м не удалось найти трюк, который сочетает в себе как фильтры

Fiddle:Working Demo

HTML

<div id="slider-container"> 
<p> 
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</p> 
</div> 

<ul id="filters"> 
    <li> 
     <input type="checkbox" value="categorya" id="filter-categorya" /> 
     <label for="filter-categorya">Category A</label> 
    </li> 
    <li> 
     <input type="checkbox" value="categoryb" id="filter-categoryb" /> 
     <label for="filter-categoryb">Category B</label> 
    </li> 
</ul> 

<hr> 
    <h3>Results</h3> 
<div id="computers"> 
    <div class="system categorya categoryb" data-price="299">A, B - 299</div> 
    <div class="system categorya" data-price="599">A - 599</div> 
    <div class="system categoryb" data-price="1099">B - 1099</div> 
</div> 
<div id="slider-range"></div> 

JQuery

$(function() { 
     $('#slider-container').slider({ 
      range: true, 
      min: 299, 
      max: 1099, 
      values: [ 299, 1099 ], 
      slide: function(event, ui) { 
       $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
       var mi = ui.values[ 0 ]; 
       var mx = ui.values[ 1 ]; 
       filterSystem(mi, mx); 
      } 
     }); 
     $("#amount").val("$" + $("#slider-container").slider("values", 0) + 
     " - $" + $("#slider-container").slider("values", 1)); 
    }); 

function filterSystem(minPrice, maxPrice) { 
    $("#computers div.system").hide().filter(function() { 
     var price = parseInt($(this).data("price"), 10); 
     return price >= minPrice && price <= maxPrice; 
    }).show(); 
} 

$("#filters :checkbox").click(function() { 
    $("#computers div.system").hide(); 
    $("#filters :checkbox:checked").each(function() { 
     $("." + $(this).val()).show(); 
    }); 
}); 

Может кто-нибудь помочь мне, чтобы объединить эти два фильтра.

Заранее спасибо, извините за мой бедный английский

Answer 1

Вы можете комбинировать оба фильтра в одной функции filterSystem(), что вы называете на каждом изменении состояния как ползунком и флажков:

UPDATE

Вот обновление, которое вмещает для нескольких фильтров CheckBox:

$(function() { 
    var minPrice = 299, 
     maxPrice = 1099, 
     $filter_lists = $("#filters ul"), 
     $filter_checkboxes = $("#filters :checkbox"), 
     $items = $("#computers div.system"); 

    $filter_checkboxes.click(filterSystem); //Call filter function on checkbox change 

    $('#slider-container').slider({ 
     range: true, 
     min: minPrice, 
     max: maxPrice, 
     values: [minPrice, maxPrice], 
     slide: function (event, ui) { 
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
      minPrice = ui.values[0]; 
      maxPrice = ui.values[1]; 
      filterSystem(); //Call filter function on slider change 
     } 
    }); 
    $("#amount").val("$" + minPrice + " - $" + maxPrice); 

    //Slider filter 
    function filterSlider(elem) { 
     var price = parseInt($(elem).data("price"), 10); 
     console.log(price); 
     return price >= minPrice && price <= maxPrice; 
    } 

    //Checkbox filter 
    function filterCheckboxes(elem) { 
     var $elem = $(elem), 
      passAllFilters = true; 
     $filter_lists.each(function() { 
      var classes = $(this).find(':checkbox:checked').map(function() { 
       return $(this).val(); 
      }).get(); 
      var passThisFilter = false; 
      $.each(classes, function (index, item) { 
       if ($elem.hasClass(item)) { 
        passThisFilter = true; 
        return false; //stop inner loop 
       } 
      }); 
      if (!passThisFilter) { 
       passAllFilters = false; 
       return false; //stop outer loop 
      } 
     }); 
     return passAllFilters; 
    } 

    //Combine checkbox and slider filters 
    function filterSystem() { 
     $items.hide().filter(function() { 
      return filterSlider(this) && filterCheckboxes(this); 
     }).show(); 
    } 
}); 

Вот updated fiddle

Обратите внимание, что этот подход должен иметь списки флажок завернутые в контейнере #filters