使用jQuery按钮切换隐藏行使用jQuery

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(); 
    }); 
});