Question

目标

我正在尝试创建一个词汇表，其中顶部有按钮A-Z，当您单击其中一个按钮时，它将对表格进行排序，仅显示包含该字母作为第一个字符的那些按钮。

如何调整以下内容以便执行此操作？

function filter_table(letter) {
    var rows = $('tr[data-filter]');
    console.log("Searching for keywords with ['" + letter + "'] " + "as the first character.");
    rows.hide();
    rows.filter(function() {
        return $(this).data('filter').search(letter) >= 0
    }).show();
}

Answer 1

您正在检查search()的结果是否为>= 0，它会告诉您该字符是否出现在字符串中 where 。 search()返回在字符串中找到搜索词的位置。您想检查字符的位置是否 0，这意味着它是字符串的第一个字符。

尽管如此，手动执行此操作可能更容易，而不是委托给其他功能。

rows.filter(function() {
    return $(this).data('filter')[0] == letter;
}).show();

这是一个演示：

function filter_table(letter) {
    var rows = $('tr[data-filter]');
    console.log("Searching for keywords with ['" + letter + "'] " + "as the first character.");
    rows.hide();
    rows.filter(function() {
        return $(this).data('filter')[0] == letter;
    }).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-filter="apple">
    <td>
      Apple
    </td>
  </tr>
  <tr data-filter="banana">
    <td>
      Banana
    </td>
  </tr>
  <tr data-filter="canteloupe">
    <td>
      Canteloupe
    </td>
  </tr>
</table>
<button onClick="filter_table('a')">
A
</button>
<button onClick="filter_table('b')">
B
</button>
<button onClick="filter_table('c')">
C
</button>

过滤表并显示匹配结果 - jQuery

1 个答案: