CODEWITHSUNDEEP
javascriptphpjqueryhtml
d1r3w0lF
d1r3w0lF

Reputation: 85

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>

Upvotes: 1

Views: 38

Answers (1)

devlin carnate
devlin carnate

Reputation: 8590

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")

Upvotes: 2

Related Questions