Jquery切換 - 同一頁面上的多個選項

Question

我在同一頁面上有多個切換的問題。

基本上我有表格設置來立即呈現某些信息，包括一個切換按鈕來展開表格以呈現更多信息。

我有切換工作，但問題是與添加額外的表+切換在同一頁上只有一個將工作。我希望每個人都是獨立的。

我在sitepoint看過類似的場景，但我似乎無法得到它點擊。

的Javascript

<script type="text/javascript"> 
$(window).load(function(){ 
$("#expand").on('click',function(){ 
    $("[data-rows='togglerow']").toggle(); 
    $(this).toggleClass("collapse"); 

}) 
});</script> 

HTML

<table id="product-table" width="100%" cellspacing="0" cellpadding="0" align="center"> 
<tbody> 
<tr> 
<td align="center" valign="top" width="100%"> 
<table width="100%" cellspacing="0" cellpadding="4"> 
<tbody> 
<tr id="tabs"> 
<td class="tabbg" colspan="2" width="20%">1</td> 
<td class="tabbg" width="13%">2</td> 
<td class="tabbg" width="12%">3</td> 
<td class="tabbg" width="20%">4</td> 
<td class="tabbg" width="14%">5</td> 
<td class="tabbg" width="11%">6</td> 
</tr> 
<tr class="prod-info top"> 
<td class="product-title">1</td> 
<td class="expand-more"> 
    <span id="expand">1</span> 
</td> 
<td>1</td> 
<td>-</td> 
<td>2</td> 
<td>-</td> 
<td>-</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
<table id="product-table-bottom" width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tbody> 
<tr class="prod-info bottom" style="display: none;" data-rows="togglerow"> 
<td class="product-title"> 
<a class="button-left">1</a> 
<a class="button-left">2</a> 
<a class="button-left pdf-download" href="#">3</a></td> 
<td width="20%"><a class="button-right">4</a></td> 
</tr> 
</tbody> 
</table> 

任何幫助將不勝感激。

Thnaks！

Answer 1

我相信你需要修改按鈕，使expand是一個類。頁面上只有一個元素應該有一個確定的id，但是許多元素可以具有相同的類。你會需要每個表的按鈕？

考慮到這一點，切換所有內容的原因是因爲您的選擇器正在選擇所有內容，因此您必須稍微修改它才能使其切換到您想要的狀態。

我的想法是使用parent()功能幾次，直到你到達父TBODY，然後找到你從那裏需要什麼。

考慮到這一切，這應該適合你。

$(window).load(function(){ 
    $(".expand").on('click',function(){ 
     $(this).parent().parent().find("tr [data-rows='togglerow']").toggle(); 
     $(this).toggleClass("collapse"); 
    }); 
});