JQuery Hover-Effekt für jede Zeile in PHP-Abfrage

Question

Für den Anfang, hier ist meine php:

$id2 = mysql_real_escape_string($id2); 
       $getdata8 = mysql_query("SELECT * FROM musicbook WHERE identify='$identify' ORDER BY id DESC LIMIT 20"); 
       $numrowsgetdata = mysql_num_rows($getdata8); 
       if ((mysql_num_rows($getdata8))<1) 
       { 
       echo "<i>Be the first to say something?</i><p/>"; 
       } 
       while ($row8 = mysql_fetch_assoc($getdata8)) 
       { 
       $id8 = $row8['id']; 
       $name8 = $row8['name']; 
       $message8 = $row8['message']; 
       $message10 = nl2br($message8); 
       $date8 = $row8['date']; 
       if ($name8==$username) 
       { 
       echo " 
       <div class='messagediv' style='background:#1A1A1A;'><div style='padding:5px;'>$message10<br/> 
       <div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div> 
       <input type='hidden' id='wpm2' value='$id8'><input type='button' id='deletelistenchat' class='deletelistenchat' style='display:none;' onclick='LinkOnClick2($id8); loadlistenchat();' value='(delete?)' /></div></div></div> 
       "; 
       } 
       else 
       { 
       echo " 
       <div class='messagediv'><div style='padding:5px;'>$message10<br/> 
       <div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div> 
       </div></div></div>"; 
       } 
       } 
       if($numrowsgetdata >= 20) 
       { 
       echo "<div id='loadingcomments'><img src='loading.gif' style='height:30px; width:30px;'></div>"; 
       } 
       ?> 

Hier ist meine Jquery:

$('.messagediv').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    document.getElementById('deletelistenchat').style.display='block'; 
    } else { 
    document.getElementById('deletelistenchat').style.display='none'; 
    } 
    }); 

Nun, was ich passieren soll, ist, dass für jeden. messagediv div Wenn Sie den Mauszeiger darüber bewegen, wird die Löschschaltfläche #deletelistenchat angezeigt. Es funktioniert jedoch nur für die letzte Zeile jeder mysql-Abfrage und ich möchte, dass der Hover-Effekt auf jedem einzelnen funktioniert, wenn ein Benutzer darüber schwebt. Wenn ich beispielsweise den Mauszeiger über den ersten Post halte, wird der Hover-Effekt beim letzten Post aktiviert, der von der mysql-Abfrage abgerufen wurde. Ich habe seit einiger Zeit versucht, das herauszufinden, und bin als irgendetwas verloren. Hilfe wäre willkommen.

Answer 1

IDs sind eindeutig. Du benutzt immer dieselbe ID, deswegen findet das DOM nur das letzte Element mit dieser ID - das ist der beabsichtigte Effekt, es ist ein Ergebnis davon, wie du dein PHP geschrieben hast.

<input type='button' id='deletelistenchat'

die ID aus dieser Schaltfläche Entfernen. Du hast die Klasse schon hier.

Lassen Sie uns Ihr Hover-Ereignis ändern.

$(function(){ 
    $('.messagediv').on('mouseover', function() { 
    $(this).find('.deletelistenchat').css('display', 'block'); 
    }).on('mouseout', function(){ 
    $(this).find('.deletelistenchat').css('display', 'none'); 
    }); 
}); 

*Edit*

DOM Das Verhalten wurde nicht wie erwartet funktioniert, weil ich nicht klar auf Ihrem Markup aussehen tat, dass meine Schuld. Machen Sie es jQuery 1.7 würdig, und trennte Ihre mouseover und mouseout-Anweisungen, um sie klar zu sehen.

Die Arbeits Fiddle ->http://jsfiddle.net/6MpX9/