Динамичное кол-во фильтров

263

11 января 2018, 21:14

$(".select-type, .select-class").change(function(){ 
  var dType = $(".select-type option:selected").data("sort"); 
  var dClass = $(".select-class option:selected").data("sort"); 
  $("#items li").each(function(){ 
    if ( (dType == "all" || dType == $(this).data("type")) && 
         (dClass == "all" || dClass == $(this).data("class")) ) { 
      $(this).show(); 
    } else { 
      $(this).hide(); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="select select-type"> 
    <option value="1" data-sort="all">All</option> 
    <option value="2" data-sort="pistol">Pistol</option> 
    <option value="3" data-sort="riffle">Riffle</option> 
    <option value="4" data-sort="smg">SMG</option> 
</select> 
 
<select class="select select-class"> 
    <option value="1" data-sort="all">Все</option> 
    <option value="2" data-sort="Base Grade">Base Grade</option> 
    <option value="3" data-sort="Extraordinary">Extraordinary</option> 
    <option value="4" data-sort="Industrial Grade">Industrial Grade</option> 
</select> 
 
<ul id="items"> 
  <li data-type="pistol" data-class="Base Grade">Item 1</li> 
  <li data-type="pistol" data-class="Base Grade">Item 2</li> 
  <li data-type="smg" data-class="Extraordinary">Item 3</li> 
  <li data-type="riffle" data-class="Extraordinary">Item 4</li> 
  <li data-type="riffle" data-class="Industrial Grade">Item 5</li> 
  <li data-type="riffle" data-class="Industrial Grade">Item 6</li> 
  <li data-type="smg" data-class="Industrial Grade">Item 7</li> 
  <li data-type="smg" data-class="Extraordinary">Item 8</li> 
</ul>

Требуется сделать динамичное количество фильтров. @igor призываю тебя.

Answer 1

Внес изменения в вашу верстку. добавил атрибут data-filter к селектам, содержит type или class, в общем, имя атрибута что фильтруем.

$(".select").change(function(){ 
 
  // список доступных фильтров 
  var filters = $(".select").toArray().map( function(v){ 
                    return $(v).data('filter'); 
                }); 
                 
  // проверяем все элементы списка 
  $("#items li").each(function(idx, li){ 
      var show = true;       // по умолчанию показываем 
       
      // сверяем все data- атрибуты доступных фильтров 
      $.each(filters, function(fIdx, fname){   
          // значение селекта фильтра     
          var fv = $(".select-" + fname + " :selected").data('sort'); 
                     
          if(fv == 'all') return true; 
                   
          // сверяям значение селекта с дата-атрбутом 
          if( $(li).data(fname) != fv){ 
              show = false; 
              return false; 
          }  
      }); 
       
      $(this).toggle(show); 
  }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="select select-type" data-filter="type"> 
    <option value="all" data-sort="all">All</option> 
    <option value="2" data-sort="pistol">Pistol</option> 
    <option value="3" data-sort="riffle">Riffle</option> 
    <option value="4" data-sort="smg">SMG</option> 
</select> 
 
<select class="select select-class" data-filter="class"> 
    <option value="all" data-sort="all">Все</option> 
    <option value="2" data-sort="Base Grade">Base Grade</option> 
    <option value="3" data-sort="Extraordinary">Extraordinary</option> 
    <option value="4" data-sort="Industrial Grade">Industrial Grade</option> 
</select> 
 
<ul id="items"> 
  <li data-type="pistol" data-class="Base Grade">Item 1 (Pistol,Base Grad)</li> 
  <li data-type="pistol" data-class="Base Grade">Item 2 (Pistol,Base Grad)</li> 
  <li data-type="smg" data-class="Extraordinary">Item 3 (smg,Extraordinary)</li> 
  <li data-type="riffle" data-class="Extraordinary">Item 4 (riffle,Extraordinary)</li> 
  <li data-type="riffle" data-class="Industrial Grade">Item 5 (riffle,Industrial Grade)</li> 
  <li data-type="riffle" data-class="Industrial Grade">Item 6 (riffle,Industrial Grade)</li> 
  <li data-type="smg" data-class="Industrial Grade">Item 7 (smg,Industrial Grade)</li> 
  <li data-type="smg" data-class="Extraordinary">Item 8 (smg,Extraordinary)</li> 
</ul>

Answer 2

function showItems(){
  var dType = $(".select-type option:selected").data("sort");
  var dClass = $(".select-class option:selected").data("sort");
  $("#items li").each(function(){
    if ( (dType == "all" || dType == $(this).data("type")) &&
         (dClass == "all" || dClass == $(this).data("class")) ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}
$(".select-type").change(function(){
  var oldClass = $(".select-class").val();
  var allClasses = [
    { value: 1, filter: "all", text: "Все" },
    { value: 2, filter: "Base Grade", text: "Base Grade" },
    { value: 3, filter: "Extraordinary", text: "Extraordinary" },
    { value: 4, filter: "Industrial Grade", text: "Industrial Grade" }
  ];
  $(".select-class").empty();
  var dType = $(".select-type option:selected").data("sort");
  function addClassOption(filter) {
    var classItem = allClasses.find(function(item) { return item.filter == filter; });
    if (classItem) {
      $("<option></option>").attr("value", item.value).data("sort", item.filter).text(item.text).appendTo(".select-class");
    }
  }
  addClassOption("all");
  $("#items li").each(function(){
    if (dType == "all" || dType == $(this).data("type")) {
      addClassOption($(this).data("class"));
    }
  });
  $(".select-class").val(oldClass);
  showItems();
});
$(".select-class").change(function(){
  showItems();
});

Update

Я, вероятно, неправильно понял вопрос. Мне почему-то показалось, что речь идет о динамическом наборе опций в втором селекте, отражающем выбор в первом селекте.