jQueryを使用して特定の表の行を表示/非表示にする方法

Question

テーブルにデータを表示していますが、行ごとにデフォルトで非表示の詳細がいくつか表示されています。リンク。

HTMLは次のようになります。

<div id="listing"> 
    <?php for(): ?> 
     <tr> 
      <td><a href="#" class="toggle">Toggle</a></td> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
     <tr class="details" style="display: none"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
    <?php endfor; ?> 
</div> 

が、私はそうのようにjQueryを使ってみましたが、結果なしで：

$('#listing').on('click', '.toggle', function(e) { 
    e.preventDefault(); 
    $(this).closest('tr .details').toggle(); 
}); 

Answer 1

各最初の行の要素には、data-targetがあります。これは、どのクラスをターゲットにし、toggleの表示/非表示になります。

基本的にtoggleクラスをクリックすると、data-targetの値がターゲットを見つけるために使用され、次にtoggleのターゲットが使用されます。

JsFiddle：https://jsfiddle.net/63ujphmj/

Javascriptを

$(function() 
{ 
    $('.toggle').on('click', function() 
    { 
    var target = $(this).data('target'); 
    $('.'+target).toggle(); 
    }); 
}); 

Htmlの

<div id="listing"> 
    <table> 
    <tr> 
     <td><a href="#" class="toggle" data-target="details-1">Toggle 1</a></td> 
     <td><a href="#" class="toggle" data-target="details-2">Toggle 2</a></td> 
     <td><a href="#" class="toggle" data-target="details-3">Toggle 3</a></td> 
     <td><a href="#" class="toggle" data-target="details-4">Toggle 4</a></td> 
    </tr> 
    <tr class="details"> 
     <td class="details-1" style="display: none">Toggle 1 details</td> 
     <td class="details-2" style="display: none">Toggle 2 details</td> 
     <td class="details-3" style="display: none">Toggle 3 details</td> 
     <td class="details-4" style="display: none">Toggle 4 details</td> 
    </tr> 
    </table> 
</div> 

Answer 2

が無効なHTMLを修正し<table>タグを含めると仮定すると、あなたが使用したいです：

$('#listing').on('click', '.toggle', function(e) { 
    e.preventDefault(); 
    $(this).closest('tr').next('.details').toggle(); 
}); 

.closest('tr')を使用してトラバースアップする必要があります彼は親行にクリックされたボタンからDOMを、次に.next('.details')は次の行要素に移動します。