基于过滤器的jQuery显示/隐藏行

Question

前言：

我正在编写一个函数，允许用户选择数据点来过滤表。每个表行都有与其关联的3个属性，Title、Department和Location。

页面上有三个多选择筛选器选项，允许用户通过每个字段选择一个或多个筛选器选项来缩小搜索范围。

当选择这些选项时，它将触发一个函数来调整表，并且只显示具有与其筛选器匹配的数据的行。

问题：

因为我的函数包含一个循环，它独立地检查每个筛选器选项，它隐藏/显示行的顺序是导致问题的。例如，如果由于筛选器要求它显示表中的第一行，则下一个筛选器只显示与其筛选器匹配的行，而忽略前面的行。

我尝试过的：

我试图以一种隐藏所有要启动的行的方式构建函数，然后如果表行的属性包含在我们的过滤器中，它将显示该行。这适用于第一个筛选器，但当它遍历行并访问其他筛选器时，它会在不应该的情况下隐藏它们。

理想解：

寻找一种方法来清理这个函数，它同时应用过滤器逻辑，而不是按照函数调用的顺序。如果我选择Austin作为我的位置，它将显示具有属性location=austin的行。如果然后在过滤器中选择一个department，它需要将location和department过滤器应用到表中。

代码示例：

// Filters our user groups based on selections
function filterUserGroups(){

  // Define our vars
  var locationsFilter = $('[name=in_ugLocationsFilter]').val(),
      departmentsFilter = $('[name=in_ugDepartmentsFilter]').val(),
      titlesFilter = $('[name=in_ugTitlesFilter]').val(),
      tempLocation = '',
      tempDepartment = '',
      tempTitle = '';

  // Loop over our rows and show the data that matches our filters
  $('[name=userGroupsRows] tr').hide();
  $('[name=userGroupsRows] tr').each(function(){

    // Get the current vars of each row
    tempLocation = $(this).data('location');
    tempDepartment = $(this).data('department');
    tempTitle = $(this).data('title');

    // Do we have any filter options selected?
    if(locationsFilter || departmentsFilter || titlesFilter){

      // If the location is in our filter, show row
      if(jQuery.inArray(tempLocation, locationsFilter) != -1) {
        $(this).show();
      }
      // If the departmentis in our filter, show row
      if(jQuery.inArray(tempDepartment, departmentsFilter) != -1) {
        $(this).show();
      }
      // If the title is in our filter, show row
      if(jQuery.inArray(tempTitle, titlesFilter) != -1) {
        $(this).show();
      }
    }
  })
}

Fiddle: https://jsfiddle.net/p4xvgLo1/1/

Answer 1

编辑:试着这样做：

var show = false;
if (locationsFilter) {
  if (jQuery.inArray(tempLocation, locationsFilter) != -1) {
    show = true;
  }
}
if (!show && departmentsFilter) {
  if (jQuery.inArray(tempDepartment, departmentsFilter) != -1) {
    show = true;
  }
}
if (!show && titlesFilter) {
  if (jQuery.inArray(tempTitle, titlesFilter) != -1) {
    show = true;
  }
}
if (show) $(this).show();

见编辑的小提琴：https://jsfiddle.net/p4xvgLo1/7/

Answer 2

由于隐藏了所有内容，我还会添加一个检查，以便如果所有过滤器都是空的，那么所有内容都显示为(locationsFilter==null && departmentsFilter==null && titlesFilter==null)，然后将data-department="Global Financial Services 2"更改为没有空格，因此它与过滤器名称：data-department="Global Financial Services2"相同。

if (locationsFilter || departmentsFilter || titlesFilter) {
    // If the location is in our filter, show row
    if (jQuery.inArray(tempLocation, locationsFilter) != -1 || (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
      $(this).show();
    }
    // If the location is in our filter, show row
    if (jQuery.inArray(tempDepartment, departmentsFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
      $(this).show();
    }
    // If the location is in our filter, show row
    if (jQuery.inArray(tempTitle, titlesFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
      $(this).show();
    }

编辑小提琴：https://jsfiddle.net/3c3vjfhz/1/