Question

我有一个搜索过滤器和一个复选框过滤器，它可以工作，但要单独使用。例如，如果我检查类别，它将进行过滤，但是如果我在搜索框中输入文本，类别过滤器将消失，就好像它会重新设置过滤器一样。正如我所说，它们是单独工作的：(

这是我的JavaScript

    var input, filter, found, table, tr, td, i, j;     

    function myFunction() {
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                if (tr[i].id !== 'tableHeader'){tr[i].style.display = "none";}
            }
        }
    }

    $(function() {
        $('input[type="checkbox"]').change(function() {
          if($('input[type="checkbox"]:checked').length > 0) {
            var vals = $('input[type="checkbox"]:checked').map(function() {
              return this.value;
            }).get();
            $('#myTable tr')
            .hide()    // 1
            .filter(function() {    // 2
            $('#tableHeader').show();
              return vals.indexOf($(this).find('td:eq(4)').text()) > -1;
            }).show();
          } else {
            // Show all
            $('#myTable tr').show();
          }
        });
      });

Answer 1

您必须分离用于过滤相同视图的功能。每个功能都忽略另一个功能的设置（即仅根据其触发控件设置视图）。

您需要创建一个将同时考虑两者值的逻辑（例如函数）-搜索输入和复选框。然后从这些控件中触发此逻辑。

如何在JavaScript中使用搜索过滤器和复选框过滤器进行高级过滤器逻辑？

1 个答案: