带有两个 select / 下拉字段的 MixItUp

Question

我的 JS 还不够先进，无法充分发挥作用。

我有两个 select 选项字段：

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

如果我按 1 select 过滤，事情就会正常过滤。如果我然后按另一个过滤，它会覆盖第一个过滤器。我想要的是它们都被使用。

我知道有一种方法可以让它工作，但我不确定如何让连接的字符串执行文档 Advanced Filtering 部分中记录的 "and" 逻辑使用 <select>。有帮助吗？

Answer 1

使用逗号，例如.. $('#filter-location, #filter-container') .on('change', 函数(){ ... ;)

Answer 2

像这样...

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

    $container.mixItUp({});

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

Answer 3

你真的很接近！由于 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>

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

带有两个 select / 下拉字段的 MixItUp

MixItUp with two select / dropdown fields

javascript

jquery

mixitup