2

目前我正在尝试隐藏一些表格行并有一个切换链接，当点击链接时显示和隐藏它们。现在我已经让它工作了，但我想知道是否有一种更简单的方法可以使函数完全通用，而不是复制和粘贴一堆具有不同类名（或 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>
4

1 回答 1

2

你可以遍历 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>
于 2013-03-11T21:39:52.333 回答