如何实现仅让button1具备表格行显示/隐藏切换功能？

嗨，这个问题很好解决！你现在的代码里$("button")会选中页面上所有的按钮，所以两个按钮都绑定了切换事件。要只让button1生效，只需要精准选中它就行，给你几个简单的方案：

方案一：给button1添加唯一ID（最推荐） #

给第一个按钮加上id="toggleBtn"，然后在jQuery里用这个ID来绑定事件，这样不管按钮顺序怎么变，都只会选中它：

修改后的完整代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head> 
<body> 
    <table> 
        <tr><td>Hello</td></tr> 
        <tr><td>Hello</td></tr> 
        <tr><td>Hello</td></tr> 
        <tr><td>Hello</td></tr> 
        <tr><td>Maniac</td></tr> 
        <tr><td>Hello</td></tr> 
    </table> 
    <button id="toggleBtn">button1</button> 
    <button>button2</button> 
    <script> 
        $('table').find('tr:gt(2)').hide(); 
        $("#toggleBtn").on("click", function() { 
            $('table').find('tr:gt(2)').toggle(); 
        }); 
    </script> 
</body> 
</html>

方案二：利用按钮的位置选择（适合固定顺序的场景） #

如果不想加ID，也可以直接选中第一个按钮，用:first选择器或者eq(0)：

// 用:first选择器
$("button:first").on("click", function() { 
    $('table').find('tr:gt(2)').toggle(); 
});

// 或者用eq(0)（索引从0开始）
$("button").eq(0).on("click", function() { 
    $('table').find('tr:gt(2)').toggle(); 
});

推荐用方案一，因为ID是唯一标识，代码可读性更强，后续维护也更方便，不会因为按钮顺序调整而失效～

内容的提问来源于stack exchange，提问作者Best Jeanist