user3455290 user3455290 - 4 months ago 6
Javascript Question

Jquery Issue: All My SQL Queries

In my code below, the JQuery events (mouseenter and leave) are implemented only on the first row of the entire list. So if I have more than one row in the results, the other rows are not effected by the JQuery and no change in the image height is done on mouseover. Can anyone explain the problem? and offer a possible solution?

<!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>

Answer

You're using the same ID on multiple elements. Inside your loop, you have:

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

IDs must be unique:

The Element.id property represents the element's identifier, reflecting the id global attribute. It must be unique in a document...

Change that to a class:

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

And then adjust your binding to $(".editprofile") instead of $("#editprofile")

Comments