Question

我在JS中不够先进以使其完全正常工作。

我有两个带选项的选择字段：

    <select name="" id="filter-position">
      <option value="all">Filter by position</option>
      <option value=".instructor">Instructor</option>
      <option value=".leader">Leader</option>
      <option value=".blah">Blah</option>
      <option value=".whatever">Whatever</option>
    </select>

    <select name="" id="filter-location">
      <option value="all">Filter by position</option>
      <option value=".portland">Portland</option>
      <option value=".missoula">Missoula</option>
      <option value=".chicago">Chicago</option>
      <option value=".newyork">New York</option>
    </select>

过滤后的商品所在的容器看起来有点像这样：

    <ul id="filter-container">
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
    </ul>

我可以让每个人正确过滤但不能一起过滤（即AND）。我使用的JS代码是这样的：

  $(function(){
    var $positionSelect = $('#filter-position'),
        $locationSelect = $('#filter-location'),
        $container = $('#filter-container');

    $container.mixItUp({});

    $positionSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });

    $locationSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });
  });

如果我按一个选择过滤，则事情会正确过滤。如果我然后通过另一个过滤，它将覆盖第一个过滤器。我想要的是两者都可以使用。

我知道有一种方法可以让它发挥作用，但我不知道如何让这个串联的字符串来做＆＃34;和＃34;使用<select>在文档的Advanced Filtering部分中记录的逻辑。帮助

Answer 1

你真的很亲密！由于mixItUp API的工作原理，过滤器不具有附加性（例如，当您致电mixItUp.filter时，它不会为已经处于活动状态的过滤器添加新的过滤器）。因此，只需要在其中一个更改时从两个下拉列表的值构造一个新的过滤器字符串。你可以这样做：

$(function(){
    var $positionSelect = $('#filter-position'),
        $locationSelect = $('#filter-location'),
        $container = $('#filter-container');

    $container.mixItUp({});

    $('#filter-position, #filter-location').on('change', function() {

      var filterString = $positionSelect.val() + $locationSelect.val();

      $container.mixItUp('filter', filterString);
    });

  });

在这种情况下，我选择使用jQuery .val()而不是本地.value，因为您已经在使用jQuery，val()在这种情况下可能会更可靠。如果你遇到麻烦，请告诉我。

您可能还想更改此内容：

<option value="all">Filter by position</option>

对此：

<option value="">Filter by position</option>

对于您的两个下拉菜单，否则您可能会遇到一些奇怪的行为。

Answer 2

使用逗号... $（＆＃39;＃filter-location，＃filter-container＆＃39;） .on（＆＃39; change＆＃39;，function（）{ ... ;）

Answer 3

像这样......

$(function(){
    $container = $('#filter-container');

    $container.mixItUp({});

    $container.on('change','#filter-position, #filter-location', function(){
        $container.mixItUp('filter', this.value);
    });
});

MixItUp有两个选择/下拉字段

3 个答案: