切換僅適用於一個元素

Question

我正在查詢數據庫以及每個對象使用數據庫結果回顯DOM元素。我使用切換顯示一個變量和隱藏另：

$(document).ready(function(){ 
    $("#name_toggle").click(function(){ 
     $("#hidden_onhover").toggle(); 
     $("#onhover").toggle();   
    }); 
}); 

PHP：

echo "<a href=\"#\"><span id=\"onhover\">$row->common_name</span><span id=\"hidden_onhover\">$row->firstname $row->lastname</span></a>"; 

的問題是，如果數據庫返回10個對象，我有10條線的結果，但切換僅適用於第一個元素。任何想法我做錯了什麼？

在此先感謝。

Answer 1

這是因爲您使用的是ID。
它應該被類替換，您需要相應地更改jQuery代碼。

所以你的PHP代碼會是這個樣子，

echo "<a href=\"#\"><span class=\"onhover\">$row->common_name</span><span class=\"hidden_onhover\">$row->firstname $row->lastname</span></a>"; 

和jQuery代碼看起來是這樣的：

$(document).ready(function(){ 
    $(".name_toggle").click(function(){ 
     $(this).find(".hidden_onhover").toggle(); 
     $(this).find(".onhover").toggle();   
    }); 
}); 

還要確保使name_toggle爲一類，而不是ID。

以上代碼假設爲name_toggle DIV是hidden_onhover和onhover DIV的父項。