Параметры выбора цепочки фильтра jquery

Я пытаюсь создать несколько фильтров для галереи: 1. дата публикации 2. количество элементов на странице 3. тип элемента

Однако один фильтр изменяется, другие фильтры не остаются с уже выбранной опцией.

это моя попытка: https://jsfiddle.net/sandiie/fon8e0o6/

$('.date').change(function() {
  var value = $(this).val();
  $('.myAlbu').show();
  if (value == 'jan') {
    $('.jan').fadeIn();
    $('.feb').hide();
  } else if (value == 'feb') {
    $('.feb').fadeIn();
    $('.jan').hide();
  }
})

$('.numberShow').change(function() {
  var val = $(this).val(),
    $item = $('.item');

  if (val == 1) {
    $item.eq(4).nextAll().hide();
  } else if (val == 2) {
    $item.eq(9).nextAll().hide();
  } else if (val == 3) {
    $item.show();
  }
}).trigger('change');

$('.type').change(function() {
  var value = $(this).val();
  $('.myAlbu').show();
  if (value == 'photos') {
    $('.sPix').fadeIn();
    $('.sVids').hide();
  } else if (value == 'videos') {
    $('.sVids').fadeIn();
    $('.sPix').hide();
  } else if (value == 'phovid') {
    $('.sVids').fadeIn();
    $('.sPix').fadeIn();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="date">
  <option disabled>Publish Date</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
</select>

<select class="numberShow">
  <option value="1">5 items per page</option>
  <option value="2">10 items per page</option>
  <option value="3">View All</option>
</select>

<select class="type">
  <option value="photos" />Photos
  <br />
  <option value="videos" />Videos
  <br />
  <option value="phovid" />all
  <br />
</select>

<div class="item sPix jan">jan photo1 item1</div>
<div class="item sVids jan">jan vid1 item12</div>
<div class="item sPix jan">jan photo2 item13</div>
<div class="item sVids jan">jan vid2 item14</div>
<div class="item sVids jan">jan vid3 item15</div>
<div class="item sPix jan">jan photo3 item16</div>
<div class="item sVids jan">jan vid4 item17</div>
<div class="item sPix jan">jan photo4 item18</div>
<div class="item sVids jan">jan vid5 item19</div>
<div class="item sPix jan">jan photo5 item110</div>
<div class="item sVids feb">feb vid6 item111</div>
<div class="item sPix feb">feb photo6 item112</div>
<div class="item sPix feb">feb photo7 item113</div>
<div class="item sPix feb">feb photo8 item114</div>
<div class="item sPix feb">feb photo9 item115</div>
<div class="item sPix feb">feb photo10 item116</div>
<div class="item sVids feb">feb vid7 item117</div>
<div class="item sVids feb">feb vid8 item118</div>
<div class="item sVids feb">feb vid9 item119</div>
<div class="item sVids feb">feb vid10 item120</div>

помогите пожалуйста, спасибо


filter jquery filtering select chained
person sandiie    schedule 10.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причина, по которой «они не остаются», заключается в том, что вы снова показываете их через .fadeIn (), когда что-то еще изменяется. Ваша логика «показывать только x записей» также имеет некоторые серьезные проблемы.

Вот один из способов преодоления этих проблем: для выполнения тяжелой работы используйте css 3, а не jQuery.

$('.date,.numberShow,.type').change(function() {
  $('#container')
    .removeClass()
    .addClass($('.date option:selected').val())
    .addClass($('.numberShow option:selected').val())
    .addClass($('.type option:selected').val())
});
#container { overflow:hidden;}
#container .item {transition: all 1s; opacity:1;position:relative;}
#container.jan .item:not(.jan), 
#container.feb .item:not(.feb),
#container.photos .item:not(.sPix),
#container.videos .item:not(.sVids) {opacity:0;position:absolute; transition:none;}
#container.v5 {max-height:90px;}
#container.v10 {max-height:180px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="date">
  <option disabled>Publish Date</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
</select>

<select class="numberShow">
  <option value="v5">5 items per page</option>
  <option value="v10">10 items per page</option>
  <option value="vall">View All</option>
</select>

<select class="type">
  <option value="photos" />Photos
  <option value="videos" />Videos
  <option value="phovid" />all
</select>
<div id="container" class="jan v5 photos">
  <div class="item sPix jan">jan photo1 item1</div>
  <div class="item sVids jan">jan vid1 item12</div>
  <div class="item sPix jan">jan photo2 item13</div>
  <div class="item sVids jan">jan vid2 item14</div>
  <div class="item sVids jan">jan vid3 item15</div>
  <div class="item sPix jan">jan photo3 item16</div>
  <div class="item sVids jan">jan vid4 item17</div>
  <div class="item sPix jan">jan photo4 item18</div>
  <div class="item sVids jan">jan vid5 item19</div>
  <div class="item sPix jan">jan photo5 item110</div>
  <div class="item sVids feb">feb vid6 item111</div>
  <div class="item sPix feb">feb photo6 item112</div>
  <div class="item sPix feb">feb photo7 item113</div>
  <div class="item sPix feb">feb photo8 item114</div>
  <div class="item sPix feb">feb photo9 item115</div>
  <div class="item sPix feb">feb photo10 item116</div>
  <div class="item sVids feb">feb vid7 item117</div>
  <div class="item sVids feb">feb vid8 item118</div>
  <div class="item sVids feb">feb vid9 item119</div>
  <div class="item sVids feb">feb vid10 item120</div>
</div>

person Robert McKee    schedule 10.06.2015
comment
спасибо, но максимальная высота не будет работать с тем, что я пытаюсь сделать, так как блоки содержимого будут изображениями и встроенными в строку с разной шириной. Следовательно, высота не будет точной, и подсчет будет неправильным. jsfiddle.net/sandiie/fon8e0o6/5 - person sandiie; 12.06.2015