JQuery toggle - Несколько опций на одной странице

Question

У меня проблема с несколькими переключателями на одной странице.

В принципе, у меня есть таблица для мгновенного представления определенной информации, кнопка переключения включена, чтобы развернуть таблицу, чтобы представить дополнительную информацию.

У меня есть рабочий режим, однако проблема заключается в добавлении дополнительных таблиц + переключателей на одной странице, только один будет работать. Я бы хотел, чтобы каждый был независимым.

У меня есть похожие сценарии здесь, на сайте сайта, но я просто не могу заставить его щелкнуть.

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 был классом. Только один элемент на странице должен иметь определенный идентификатор, но многие элементы могут иметь один и тот же класс. Вам нужна кнопка за стол?

Имея это в виду, причина в том, что он переключает все, потому что ваш селектор выбирает все, поэтому вам придется немного изменить его, чтобы заставить его только переключать то, что вы хотите.

Моей идеей было бы использовать функцию parent() несколько раз, пока вы не достигнете родительского тела, а затем найдите то, что вам нужно оттуда.

Учитывая это, это должно сработать для вас.

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