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>

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

1 个答案: