Toggle funktioniert nur für ein Element

Question

Ich frage die Datenbank und für jedes Objekt echo DOM Elemente mit Datenbank-Ergebnissen. Ich bin mit der Umschaltung eine Variable zu zeigen, und eine andere verbergen:

$(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>"; 

Das Problem ist, dass, wenn Datenbank 10 Objekte zurückgibt, I 10 Zeilen mit den Ergebnissen, aber schalten funktioniert nur auf das erste Element. Irgendwelche Ideen, was ich falsch mache?

Vielen Dank im Voraus.

Answer 1

Es ist, weil Sie IDs verwenden.
Es sollte durch Klassen ersetzt werden und Sie müssen den jQuery-Code entsprechend ändern.

So Ihre PHP-Code würde in etwa so aussehen,

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

Und jQuery-Code würde wie folgt aussehen:

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

Auch stellen Sie sicher, name_toggle als Klasse statt ID zu machen.

Der obige Code geht von name_toggle. DIV ist das übergeordnete Element von hidden_onhover und onhover DIV.