MixItUp有两个选择/下拉字段

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

如果我按一个选择过滤,则事情会正确过滤.如果我然后通过另一个过滤,它将覆盖第一个过滤器.我想要的是他们两个都被使用.

我知道有一种方法可以让它工作,但我不知道如何使用连接字符串来执行"和"逻辑,如文档的高级过滤部分中所述<select>.救命？

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

  });

在这种情况下,我选择.val()在本机.value上使用jQuery,因为你已经在使用jQuery,val()在这种情况下可能更可靠.如果你遇到麻烦,请告诉我.

您可能还想更改此内容:

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

对此:

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

对于你的两个下拉菜单,否则你可能会得到一些奇怪的行为.