すべてのdiv（表示+不可視）にフィルタ関数を適用

Question

jqueryを使用してレビューに基づいて商品をフィルタリングするフィルタを作成しました。選択ボックスの値が変更されると、選択されたボックスの選択値から選択された星を取得するjqueryイベントが呼び出されます。

そしてここif/else声明、

if(stars == 'all'){ 
    $('#results > div.stars').fadeIn(450); 
} else{ 
    $('#results > div.stars').filter(function(){ 
     return $(this).attr('stars') != stars 
    }).fadeOut(450); 
} 

は、今ではかなりうまく動作しますが、小さな問題があるのです。私は2番目の時間をフィルタすると、それが（ちょうどdivsdisplay:blockとプロパティが含まれています）、すべての製品が含まれていません

例：私は5つ星に戻って変更した場合、5つ星による まずIフィルターはその後、今4によって再びフィルタリングし、それは、私はそれらをすべて（if条件を実行し、すべてのdivsdisplay:blockに設定）フィルタ

試みるまでは動作しません：それらをフィルタリングする前に は私がfadeInすべてdivsしようとしたが、それはひどい見えます。私はまた、親divを隠して、フィルターを適用して親divを表示しようとしましたが、それも良く見えません。

質問：このシナリオを処理する適切な方法は何ですか？

例スニペット：

jQuery(document).on('change', '#byStars', function() { 
 
    var stars = jQuery(this).val(); 
 

 
    if(stars == 'all'){ 
 
     jQuery('div[stars]').fadeIn(450); 
 
    } else { 
 
     jQuery('div[stars]').filter(function(){ 
 
      return jQuery(this).attr('stars') != stars 
 
     }).fadeOut(450); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='byStars' class='col-md-2 pull-right'> 
 
    <option value='all'>All</option> 
 
    <option value='5'>5 Star</option> 
 
    <option value='4'>4 Star</option> 
 
    <option value='3'>3 Star</option> 
 
    <option value='2'>2 Star</option> 
 
    <option value='1'>1 Star</option> 
 
    <option value='0'>0 Star</option> 
 
</select> 
 

 
<div stars="5">5</div><br/> 
 
<div stars="4">4</div><br/> 
 
<div stars="3">3</div><br/> 
 
<div stars="2">2</div><br/> 
 
<div stars="1">1</div><br/>

Answer 1

あなたは常にフィルタを適用する前に、フルセットを持っているように、if/else前jQuery('div[stars]').show();を追加する必要があります。

jQuery(document).on('change', '#byStars', function() { 
 
    var stars = jQuery(this).val(); 
 
    if (stars == 'all') { 
 
    jQuery('div[stars]').fadeIn(450); 
 
    } else { 
 
    jQuery('div[stars]').filter(function() { 
 
     jQuery(this).attr('stars') != stars ? jQuery(this).hide() : jQuery(this).show(); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='byStars' class='col-md-2 pull-right'> 
 
    <option value='all'>All</option> 
 
    <option value='5'>5 Star</option> 
 
    <option value='4'>4 Star</option> 
 
    <option value='3'>3 Star</option> 
 
    <option value='2'>2 Star</option> 
 
    <option value='1'>1 Star</option> 
 
    <option value='0'>0 Star</option> 
 
</select> 
 

 
<div stars="5">5</div> 
 
<div stars="4">4</div> 
 
<div stars="3">3</div> 
 
<div stars="2">2</div> 
 
<div stars="1">1</div>

Answer 2

他のものを非表示にするには、クリックしたアイテムをフェードインする必要があっただけかもしれません。私はスニペットを追加しました。私はそれが助けて欲しい

$(".selectMe").on("click", function(){ 
 

 
    var stars = "all"; 
 
    
 
    stars = $(this).attr('data-id'); 
 
    
 

 
    if(stars == 'all'){ 
 
    
 
     $('#results > div.stars').fadeIn(450); 
 
     
 
    } else { 
 
     
 
     $('#results').find("[data-stars='"+stars+"']").fadeIn(450); //added this in to fade in selected before hide others below. 
 
      
 
     $('#results > div.stars').filter(function(){ 
 
      
 
      return $(this).attr('data-stars') != stars; 
 
      
 
     }).fadeOut(450); 
 
     
 
    } 
 
    
 
});

.stars { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class='selectMe' data-id="all">all</button> 
 
<button class='selectMe' data-id="fiveStars">5</button> 
 
<button class='selectMe' data-id="fourStars">4</button> 
 
<button class='selectMe' data-id="threeStars">3</button> 
 
<button class='selectMe' data-id="twoStars">2</button> 
 
<button class='selectMe' data-id="oneStar">1</button> 
 

 
<div id="results"> 
 
RESULTS: 
 
    <div class="stars" data-stars='oneStars'>1 stars</div> 
 
    <div class="stars" data-stars='twoStars'>2 stars</div> 
 
    <div class="stars" data-stars='threeStars'>3 stars</div> 
 
    <div class="stars" data-stars='fourStars'>4 stars</div> 
 
    <div class="stars" data-stars='fiveStars'>5 stars</div> 
 
    <div class="stars" data-stars='fiveStars'>5 stars</div> 
 
    <div class="stars" data-stars='oneStar'>1 stars</div> 
 

 
</div>