切换仅适用于一个元素

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的父项。