2016-07-12 3 views
1

In meinem Code unten sind die JQuery-Ereignisse (mouseenter und leave) nur in der ersten Zeile der gesamten Liste implementiert. Wenn also mehr als eine Zeile in den Ergebnissen enthalten ist, werden die anderen Zeilen nicht von JQuery beeinflusst, und bei Mouseover wird keine Änderung der Bildhöhe vorgenommen. Kann jemand das Problem erklären? und bieten eine mögliche Lösung?Jquery-Problem: Alle meine SQL-Abfragen

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="css/main.css"> 
    <title></title> 
</head> 
<body> 
<div id="headpanel"></div> 
<div id="tablehead"> 
<a href="addmember.php"><img src="images/ico/add.png" id="addmember"><span style="position:absolute; top:3vmax; left:11vmax;">Add A New Profile </span></a> 
</div> 
<div id="tablebody"> 
<?php 
$profile_test = mysqli_query($db,"SELECT * FROM studs WHERE prof_id= '$prof_id'"); 
while($profile = mysqli_fetch_array($profile_test)) 
{ 
    ?> 

    <div id="contact<?php echo $profile['stud_id']; ?>" class="contactblock"> 
<?php 
    echo "Name:"; 
    echo "&nbsp;"; 
    echo "&nbsp;"; 
    echo $profile['firstname']; 
    echo "&nbsp;"; 
    echo "&nbsp;"; 

    echo $profile['lastname']; 
    echo "<br>"; 
    echo "Marks:"; 
    echo "&nbsp;"; 
    echo $profile['marks']; 
?> 

<img src="images/ico/edit.png" id="editprofile"> 

</div> 
<?php 
} 
?> 
</div> 

</body> 
</html> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#editprofile").mouseenter(function(){ 

     $(this).animate({"height":"4vmax"}); 
    }) 
    $("#editprofile").mouseleave(function(){ 

     $(this).animate({"height":"3vmax"}); 
    }) 

}) 
</script> 
+0

Bindung einstellen, wo '$ db' ist definiert ? – Iceman

+0

Dort habe ich den oberen PHP-Teil nicht zur Verfügung gestellt! – d1r3w0lF

Antwort

2

Sie verwenden dieselbe ID für mehrere Elemente. Innerhalb der Schleife, haben Sie:

<img src="images/ico/edit.png" id="editprofile"> 

IDs must be unique:

Die Element.id Eigenschaft stellt die Kennung des Elements, reflektieren die ID globales Attribut. Es muss in einem Dokument ...

Ändern eindeutig sein, dass eine Klasse:

<img src="images/ico/edit.png" class="editprofile"> 

und dann zu $(".editprofile") statt $("#editprofile")

+0

Es hat es gelöst! Danke vielmals! : D ... Ich muss auch etwas Neues lernen! .. kannte diese Einschränkung über IDs nicht, wollte immer den Vorteil der Klasse gegenüber ID wissen, jetzt weiß ich! – d1r3w0lF

Verwandte Themen