javascript - 如何将多个过滤器组合在一起以使用 jQuery 过滤任务行？

Question

我用 HTML 和 jQuery 拼凑了一个基本示例任务列表。我已将一些 on change 事件附加到我的 Filter DropDown Selection Fields

演示:http://codepen.io/jasondavis/pen/MwOwMX?editors=101

我为每一个都有一个过滤器选择字段:

• 指定用户
• 任务状态
• 里程碑
• 优先级
• 标签

他们都独立工作以完成从我的任务列表中过滤掉不匹配结果的工作。

对于每个任务行，我将每个可过滤选项的值存储在一个数据属性中，就像这个例子任务行HTML:

      <tr id="task-3"
          class="task-list-row" 
          data-task-id="3"
          data-assigned-user="Donald"
          data-status="Not Started"
          data-milestone="Milestone 1"
          data-priority="Low"
          data-tags="Tag 3">
        <td>Task title 3</td>
        <td>11/16/2014</td>
        <td>02/29/2015</td>
        <td>Low</td>
        <td>Milestone 1</td>
        <td>Donald</td>
        <td>Tag 3</td>
      </tr>

因此任务行的实际文本并不重要，因为任务行不会显示所有属性。重要的是存储在任务行数据属性中的值。

Milestone 设置为 Milestone 2 的任务行/记录将具有这样的数据属性 data-milestone="Milestone 2"

示例 JavaScript/jQuery 过滤器代码:

// Task Milestone Dropdown Filter
$('#milestone-filter').on('change', function() {
  var taskMilestone = this.value;

  if(taskMilestone === 'None'){
    $('.task-list-row').hide().filter(function() {
      return $(this).data('milestone') != taskMilestone;
    }).show();
  }else{
    $('.task-list-row').hide().filter(function() {
      return $(this).data('milestone') == taskMilestone;
    }).show();  
  }
});

正如我提到的那样。我可以让我的每个“过滤器”自行工作，但是一旦我尝试一次应用多个过滤器，它就无法使用当前代码。

如果您能帮助我修改我的代码以制作一个有效的多过滤器示例，我将不胜感激？

我当前的演示在这里:http://codepen.io/jasondavis/pen/MwOwMX?editors=101

---

更新测试 2

经过一番思考，我在想也许我需要将所有当前的 Filter 值存储到变量中，然后在每个 change 事件中而不是这样:

 return $(this).data('milestone') != taskMilestone;

它需要更像这样......

 return $(this).data('milestone') != taskMilestone
        && $(this).data('priority') != taskPriority
        && $(this).data('tags') != taskTags
        && .... for all filters;

这听起来对吗？

没关系，只是没有运气就试过了!

Answer 1

您在第二次测试中很接近。这是一个工作演示:

http://codepen.io/luciopaiva/pen/oXpzGw?editors=101

我稍微重构了您的代码并将逻辑集中在 updateFilters() 周围，每次发生任何更改事件时都会调用它。它首先假定应显示每一行，然后针对不同于默认值(“任何”、“无”或 未定义)的每个过滤器进行测试。

对了，如果可以把data-user-assigned改成data-user，这里稍微改进一下代码，大大减少代码行数:

http://codepen.io/luciopaiva/pen/YXYGYE?editors=101

我正在使用 call所以我可以将 DOM 元素(通过 this 引用)传递给 changeFilter() 的上下文。

我还将所有过滤器放入一个对象 (filters) 中，这样我就可以通过名称访问每个过滤器，例如 filters[filterName] 并能够实现自动化。

值得一提的是，filters 变量是全局变量，整个变量应该放在 IIFE 中。 .

但让我们继续。您可以更进一步，删除每个 change 事件的样板代码，考虑到您可以将元素 #assigned-user-filter 重命名为 #user-filter:

http://codepen.io/luciopaiva/pen/YXYGaY?editors=101

这个 final方法的 Javascript:

(function () {
  var
    filters = {
      user: null,
      status: null,
      milestone: null,
      priority: null,
      tags: null
    };

  function updateFilters() {
    $('.task-list-row').hide().filter(function () {
      var
        self = $(this),
        result = true; // not guilty until proven guilty

      Object.keys(filters).forEach(function (filter) {
        if (filters[filter] && (filters[filter] != 'None') && (filters[filter] != 'Any')) {
          result = result && filters[filter] === self.data(filter);
        }
      });

      return result;
    }).show();
  }

  function bindDropdownFilters() {
    Object.keys(filters).forEach(function (filterName) {
      $('#' + filterName + '-filter').on('change', function () {
        filters[filterName] = this.value;
        updateFilters();
      });
    });
  }

  bindDropdownFilters();
})();

这里我使用了与第二种方法相同的逻辑，使用过滤器名称来引用每个下拉列表。经典样板!