Question

在我的下面的代码中，JQuery事件（mouseenter和leave）仅在整个列表的第一行实现。因此，如果结果中有多行，则其他行不受JQuery的影响，并且鼠标悬停时图像高度不会发生任何变化。有谁能解释这个问题？并提供可能的解决方案？

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

您在多个元素上使用相同的ID。在你的循环中，你有：

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

IDs must be unique：

Element.id属性表示元素的标识符，反映id全局属性。它必须是独一无二的文件...

将其更改为班级：

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

然后将绑定调整为$(".editprofile")而不是$("#editprofile")

Jquery问题：所有我的SQL查询

1 个答案: