Question

我有一个搜索输入字段和一个表。当您输入某些单词时，该表会显示与您键入的单词匹配的行。我在W3School上看到了一个例子。他们在filter（）中使用JQuery toggle（），我真的不明白。像这样的代码

HTML

<input class='form-control' id='myInput' type='text' placeholder='Search.....'>
<table>
    <thead>
       table header......
    </thead>
    <tbody id='myTable'>
        here goes 4 rows
    </tbody>
</table>

JS

$(document).ready(function(){
$('#myInput').on('keyup', function(){
    var value = $(this).val().toLowerCase();
    $('#myTable tr').filter(function(){
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
});
});

任何人都可以解释filter（）函数中的代码行吗？它的目的是什么以及它是如何工作的。谢谢！

Answer 1

它实际上是对过滤器的不当使用，通常用于根据回调中的条件减少集合。他们只是使用它来创建一个循环来隔离<tr>的每个实例，而不提供实际进行任何过滤的任何标准

更合适且更容易理解的方法是将filter替换为each来完成同样的事情

$(document).ready(function() {
  $('#myInput').on('keyup', function() {
    var value = $(this).val().toLowerCase();
    $('#myTable tr').each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

Answer 2

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

上面的代码根据用户在输入字段中输入的输入值隐藏并显示表行。

jquery toggle（）函数隐藏并显示html元素。

indexOf（value）函数用于在字符串中搜索给定值。

在filter（）中使用JQuery toggle（）的目的是什么？

2 个答案: