Question

我有一张桌子，每个可见的行下面都有一行，按下按钮可以切换其可见性。可以找到here的实时演示。

我真的很喜欢使用jQuery，而我遇到的问题可能是一个简单的解决方案。首先，我希望默认情况下隐藏可切换行，并且仅在单击按钮时显示（现在它们显示页面加载时）。我怎样才能做到这一点？

要隐藏行，我有以下内容：

$(document).ready(function(){
    $("#button1").click(function(){
        $(".trhideclass1").toggle();
    });
});

$(document).ready(function(){
    $("#button2").click(function(){
        $(".trhideclass2").toggle();
    });
});

我不想单独为每个按钮创建一个函数，那么更好的方法是什么？我的想法是给<button>和<tr>相同的id，并以某种方式使按钮只切换相同id的内容，这可能吗？

Answer 1

您可以向按钮添加类（如btn-toggle），然后遍历DOM以获取目标元素：

$(".btn-toggle").click(function() {
    $(this).closest('tr').next('tr').toggle();
});

传递给.closest和.next方法的值可以是任何有效的选择器。要了解这些方法的工作原理，您可以参考jQuery文档。

https://jsfiddle.net/mc1dkq6a/

Answer 2

您可以在css中设置默认隐藏

  .trhideclass1,.trhideclass2{
      display : none;
    }

为了更容易处理，您只应将按钮ID更改为number

HTML

<button id="1" class="btn btn-primary">Click me</button>
<button id="2" class="btn btn-primary">Click me</button>

JS

$(document).ready(function(){
    $(".btn").click(function(){
        current = $(this).attr('id');
        $('.trhideclass'+current).toggle();
    });
});

使用jQuery

2 个答案: