Javascript 需要通过单独单击表中的每一行来切换div。有人能推荐一些干净的jquery使用吗？

我想做一个7-10行2列的表格。1列用于按钮，1列用于文本

单击特定行中的按钮后，它将从一个文本块切换到同一行中的另一个文本块

HTML的示例：

<table>
    <tbody>
        <tr>
            <td>
            <a class="button1" href="#">Reveal Tips</a>
            </td>
            <td>
            <div class="textshown1">
            <p>Text being initially displayed</p>
            </div>

            <div class="texthidden1" style="display: none;">
            <p>Text to be displayed after onclick funtion</p>
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <a class="button2" href="#">Reveal Tips</a>
            </td>
            <td>
            <div class="textshown2">
            <p>Text being initially displayed</p>
            </div>

            <div class="texthidden2" style="display: none;">
            <p>Text to be displayed after onclick funtion</p>
            </div>
            </td>
        </tr>
    </tbody>
</table>

我正在寻找一种更干净的方法来实现这一点，而不必为每个按钮/行创建单独的onclick函数

---

有人能提个建议吗？谢谢。

您可以使用

数据

属性在每个按钮和

文本显示

和

文本隐藏

元素上添加

id

。然后，您可以使用下面的

jQuery

简单地查找那些

div

元素-

jQuery（'.discover按钮'）。单击（函数（e）{
设id=$（this）.data（“id”）；
jQuery（“.textShowed[data id=“+id+”]）。toggle（）；
jQuery（“.texthidden[data id=“+id+”]）。toggle（）；
})

最初显示的文本

单击功能后要显示的文本

最初显示的文本

单击功能后要显示的文本

您可以使用相同的类名来避免多次添加事件处理程序。然后使用jquery，如：

$(".reveal-button").on("click", function(e) {
  $(this).parents("tr").find(".textshown").hide(0);
  $(this).parents("tr").find(".texthidden").show(0);
});

所有按钮都将具有“显示按钮”类，单击该类，找到所单击按钮的上升

tr

节点，然后找到tr节点的后代div（具有特定类名），然后隐藏/显示div

如果行是动态生成的，则将事件订阅调用更改为：

$（“表格”）。在（“点击“，”显示按钮），功能（e）{

$(".reveal-button").on("click", function(e) {
  $(this).parents("tr").find(".textshown").hide(0);
  $(this).parents("tr").find(".texthidden").show(0);
});