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