jquery过滤器链接选择选项

Question

我正在尝试为画廊设置多个过滤器： 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>

请帮忙，谢谢

Answer 1

“他们没有留下”的原因是因为当其他事情发生变化时，您正在通过 .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>