jquery - 使用jquery隐藏表行，简化功能

Question

目前，我正在尝试隐藏一些表格行，并有一个切换链接，可以在单击链接时显示和隐藏它们。现在我已经可以使用它了，但我想知道是否有一种更简单的方法可以使该函数完全通用，而不是复制并粘贴一堆仅具有不同类名(或 ID)的相同代码。根据我对 JS/Jquery 的理解(这是我第一次做 JS/JQuery，我通常是后端开发人员)，看起来使用表可能不是最明智的想法，但我正在修改原始代码。如果我必须使用表格以外的东西，我会重写它，但如果不可能，我只需要一些指导

<table>
    <tr>
        <th>Some stuff</th>
        <a href="#" class="hide link1">Show/Hide</a>
    </tr>
    <tr class="show hide row1">
        <th>Random data</th>
    </tr>
        <tr>
        <th>Some stuff2</th>
        <a href="#" class="hide link2">Show/Hide</a>
    </tr>
    <tr class="show hide row2">
        <th>Random data2</th>
    </tr>
        <tr>
        <th>Some stuff3</th>
        <a href="#" class="hide link3">Show/Hide</a>
    </tr>
    <tr class="show hide row3">
        <th>Random data3</th>
</table>

<script>
    $(".hide link1").click(function(){
        $(".show hide row 1").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link2").click(function(){
        $(".show hide row 2").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link3").click(function(){
        $(".show hide row3").toggle(400)
    });
    $(".show hide row3").hide()
</script>

Answer 1

你可以遍历 DOM:

$(function() {
    $("table a.hide").click(function(e){
        e.preventDefault();
        $(this).closest('tr').next('tr.show').toggle(400);
    });
});

请注意，jQuery 选择器的工作方式与 CSS 选择器类似，因此您的选择器应该是:

$(".show.hide.row2").hide();

而不是:

$(".show hide row 2").hide();

选择并隐藏伪元素2:

<tr class='show'>
   <hide>
       <row>
          <2>Come-on!</2>
       </row>
   </hide>
</tr>