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);   
}

现在它运作良好但是有一个小问题。当我第二次过滤时，它不会包含所有产品（只包括divs属性display:block）

示例： 首先我按5星过滤，然后再按4过滤，现在如果我改回5星，那么在我全部过滤它们之前它不起作用（if条件运行并将所有divs设置为display:block）

尝试： 在过滤它们之前，我尝试fadeIn所有divs，但它看起来很糟糕。我还试图隐藏父div并应用过滤器，然后显示父div，但它看起来也不好。

问题：那么，处理这种情况的正确方法是什么？

示例代码段

＆＃13;

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);
    }

});

＆＃13;

<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/>

＆＃13;

将滤镜功能应用于所有div（可见+不可见）

0 个答案: