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

如果我通过一个选择过滤，事情过滤正确。如果我用另一个过滤器过滤，它会覆盖第一个过滤器。我想要的是它们都被使用。

我知道有一种方法可以让它工作，但我不确定如何获得连接的字符串来做"one_answers"逻辑，如文档使用<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);
    });
  });

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

你可能也想改变这个:

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

:

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

，否则你可能会得到一些奇怪的行为。

Answer 2

使用逗号…$ (" # filter-location, # filter-container")内("改变",函数(){…div;)

像这样…

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