最初の要素でのみ動作するトグル

Question

個々のテーブル行をトグル（）しようとしています。各行はシリアル番号を取得し、行のIDに取り込まれます。 more.pngイメージがクリックされると、行が表示されるか非表示になります。これは最初の行についてのみ行います。私は何が欠けていますか？

$(function() { 
function showdetail() 
    { 
    var id = $(this).attr('rel'); 
    $('#'+id).toggle(); 
    } 
    $('#detail').click(showdetail); 
}); 

これをクリックします。

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />'; 

これは表示されるか非表示にされます。

echo '<tr id="details'.$serial.'"><td>stuff...</td><td>stuff...</td></tr>'; 

Answer 1

ページが読み込まれると、単一の要素、つまりid = "detail"を持つ要素の最初の出現がバインドされます。同じIDを持つページに複数の要素を含めることはできません。

この置き換え：

$('.detail').click(showdetail); 

：そして、これに

$('#detail').click(showdetail); 

を交換

echo '<img src="more.png" class="detail" rel="details'.$serial.'" />'; 

：これで

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />'; 

を

明らかに、これはテストされていないので、それが動作するかどうか教えてください...