Question

前言

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

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

选择这些选项后，它会触发一个调整表的函数，并仅显示包含与其过滤器匹配的数据的行。

问题：

由于我的函数包含一个独立检查每个过滤器选项的循环，因此它按顺序隐藏/显示行会导致问题。例如，如果它应该显示表中的第一行，因为过滤器告诉它，下一个过滤器说只显示与其过滤器匹配的行，忽略它之前的行。

我尝试了什么：

我尝试以隐藏所有行的方式构建函数，然后如果表行的属性包含在我们的过滤器中，则显示该行。这适用于第一个过滤器，但是当它遍历行并点击其他过滤器时，它会隐藏它们不应该是。

理想解决方案：

寻找一种清理此函数的方法，它一次性应用过滤器逻辑，而不是通过函数调用按顺序。如果我选择Austin作为我的位置，则会显示具有属性location=austin的行。如果我然后在过滤器中选择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();
      }
    }
  })
}

小提琴： 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"更改为没有空格所以＆＃ 39; s与过滤器名称相同：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/

jQuery根据过滤器

2 个答案: