Интеграция сортировки по цене в фильтр

188
13 января 2018, 00:40

$(".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> 
 
<select class="select2"> 
    <option value="1">Сначала дорогие</option> 
    <option value="2">Сначала дешевые</option> 
</select> 
 
<ul id="items"> 
  <li data-type="pistol" data-class="Base Grade" data-price="10" >Item 1 (Pistol,Base Grad, 10)</li> 
  <li data-type="pistol" data-class="Base Grade" data-price="20">Item 2 (Pistol,Base Grad, 20)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="15">Item 3 (smg,Extraordinary, 15)</li> 
  <li data-type="riffle" data-class="Extraordinary" data-price="30">Item 4 (riffle,Extraordinary, 30)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="5">Item 5 (riffle,Industrial Grade, 5)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="10">Item 6 (riffle,Industrial Grade, 10)</li> 
  <li data-type="smg" data-class="Industrial Grade" data-price="50">Item 7 (smg,Industrial Grade, 50)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="25">Item 8 (smg,Extraordinary, 25)</li> 
</ul>

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

Answer 1

Если не брать в расчет одновременную сортировку по нескольким полям, то будет как то так.

$(".select-filter").change(function(){ 
 
  // список доступных фильтров 
  var filters = $(".select-filter").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); 
  }); 
 
}); 
 
$(".select-sort").change(function(){ 
   var order = $(this).val(); 
    
   var items = $("#items li").sort(function(a,b){ 
                       var av = $(a).data('price'); 
                       var bv = $(b).data('price'); 
                       return order == 'desc' ? av-bv : bv-av; 
                   }); 
   $(items).detach().appendTo("#items"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="select-filter 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-filter 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> 
 
<select class="select-sort" data-sort="price"> 
    <option value="asc">Сначала дорогие</option> 
    <option value="desc">Сначала дешевые</option> 
</select> 
 
<ul id="items"> 
  <li data-type="pistol" data-class="Base Grade" data-price="10" >Item 1 (Pistol,Base Grad, 10)</li> 
  <li data-type="pistol" data-class="Base Grade" data-price="20">Item 2 (Pistol,Base Grad, 20)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="15">Item 3 (smg,Extraordinary, 15)</li> 
  <li data-type="riffle" data-class="Extraordinary" data-price="30">Item 4 (riffle,Extraordinary, 30)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="5">Item 5 (riffle,Industrial Grade, 5)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="10">Item 6 (riffle,Industrial Grade, 10)</li> 
  <li data-type="smg" data-class="Industrial Grade" data-price="50">Item 7 (smg,Industrial Grade, 50)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="25">Item 8 (smg,Extraordinary, 25)</li> 
</ul>

Answer 2

var list = $('#items'), 
  listCollection; 
 
$(".select2").change(function() { 
  listCollection = $('#items>li'); 
  var sort = $(this).val(); 
  listCollection.sort(function(a, b) { 
    if (sort == 1) { 
      return ($(a).data('price')) > ($(b).data('price')) ? 1 : -1; 
    } else if (sort == 0) { 
      return ($(a).data('price')) > ($(b).data('price')) ? -1 : 1; 
    } 
  }); 
  list.html(listCollection); 
}); 
 
$(".select2").trigger('change');
<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> 
 
<select class="select2"> 
    <option value="0">Сначала дорогие</option> 
    <option value="1">Сначала дешевые</option> 
</select> 
 
<ul id="items"> 
  <li data-type="pistol" data-class="Base Grade" data-price="10">Item 1 (Pistol,Base Grad, 10)</li> 
  <li data-type="pistol" data-class="Base Grade" data-price="20">Item 2 (Pistol,Base Grad, 20)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="15">Item 3 (smg,Extraordinary, 15)</li> 
  <li data-type="riffle" data-class="Extraordinary" data-price="30">Item 4 (riffle,Extraordinary, 30)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="5">Item 5 (riffle,Industrial Grade, 5)</li> 
  <li data-type="riffle" data-class="Industrial Grade" data-price="10">Item 6 (riffle,Industrial Grade, 10)</li> 
  <li data-type="smg" data-class="Industrial Grade" data-price="50">Item 7 (smg,Industrial Grade, 50)</li> 
  <li data-type="smg" data-class="Extraordinary" data-price="25">Item 8 (smg,Extraordinary, 25)</li> 
</ul>

READ ALSO
Не работает jquery внутри ballon

Не работает jquery внутри ballon

создаю метку с балуном, в balloonContentBody вписываю html c классом 'set-moderated' для срабатывания события jquery, но оно не срабатываетЗнаю, что есть решение...

173
Tooltip на JavaScript [требует правки]

Tooltip на JavaScript [требует правки]

tomilinosamoletru/building/15 подскажите пожалуйста, может кто видел такое раньше, на сайте внизу есть "шахматная доска", при hover на синие квадраты вылазит...

200
Коррекция выпадающего меню

Коррекция выпадающего меню

Привет! Пытаюсь выстроить меню с выпадающими блоками и у меня возникли небольшие затруднения

199