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>