Question

我在我的配合项目中使用此过滤器（请参阅下面的代码），但我想稍微更改jquery部分。由于我没有经验，我希望我能得到一些帮助！

我尝试用我使用的例子来解释我的意图。我想在我的组合中展示“所有简短”和“所有人”。但在这个例子中，当我选择“短”和“男人”时，只会留下“矮个子”。实际上这是一个AND过滤器。我想把它变成一个OR过滤器，看看所有矮人（包括女人）和看到所有男人（包括高个子男人）。

我怎样才能做到这一点？

（对不起我的英文，这不完美：P）

<div id="filter">
    <h2>Gender</h2>
    <ul>
      <li data-filter="men"> Men</li>
      <li data-filter="women"> Women</li>
    </ul>

    <h2>Height</h2>
    <ul>
      <li data-filter="short"> Short</li>
      <li data-filter="tall"> Tall</li>
    </ul>

    <div class="item men short">Men/Short</div>
    <div class="item men tall">Men/Tall</div>
    <div class="item women short">Women/Short</div>
    <div class="item women tall">Women/Tall</div>
</div>

$('#filter li').on('click', function(){
    $(this).toggleClass('active').siblings().removeClass('active');
    var gender = $('#filter ul').eq(0).find('.active').data('filter')||'',
        height = $('#filter ul').eq(1).find('.active').data('filter')||'',
        sel = '.item'+(gender!=''?'.'+gender:'', (height!=''?'.'+height:'');
    $(sel).fadeIn(200)
    $('.item').not(sel).fadeOut(200);
});

body {
  font-family: courier;
  font-size: 12px;
}

.item {
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
  background: black;
  color: white;
  text-align: center;
}

#filter ul {
  list-style: none;
  padding: 0;
}

#filter li {
  cursor: pointer;
}

#filter li:before {
  content: '◻';
}

#filter li.active:before {
  content: '▣';
}

Answer 1

您错过了结束)，您需要将选项与,分开才能选择：

e.g。

sel = (gender!='' ? '.item.' + gender : '') + (height!='' ? ',.item.' + height : '');

这应该生成一个选择器，如：

.item.female,.item.tall

其中的内容为“选择.item并具有.female，或，选择.item并具有.tall”

领先,可能存在问题，例如如果没有选择性别，那么您可能需要考虑到这一点。 e，g删除前导,：

if (sel[0] === ','){
    sel = sel.slice(1);
}

另一种方法是使用实际的filter调用，使用返回true的布尔函数（对于您希望保留的项目）：

$('#filter li').on('click', function(){
    $(this).toggleClass('active').siblings().removeClass('active');

    var gender = $('#filter ul').eq(0).find('.active').data('filter')||'',
        height = $('#filter ul').eq(1).find('.active').data('filter')||'';

    var $match = $('.item').filter(function(){
        return (gender && $(this).is('.' + gender)) || (height && $(this).is('.' + height));
    });

    $('.item').not($match).slideUp();
    $match.slideDown();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/7qufp5s6/

如何将简单的AND过滤器更改为OR过滤器

1 个答案: