在我下面的代码中，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 " ";
echo " ";
echo $profile['firstname'];
echo " ";
echo " ";
echo $profile['lastname'];
echo "<br>";
echo "Marks:";
echo " ";
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>
最佳答案
您在多个元素上使用相同的 ID。在你的循环中，你有:
<img src="images/ico/edit.png" id="editprofile">
The Element.id property represents the element's identifier, reflecting the id global attribute. It must be unique in a document...
将其更改为类:
<img src="images/ico/edit.png" class="editprofile">
然后将您的绑定(bind)调整为 $(".editprofile") 而不是 $("#editprofile")
关于javascript - Jquery 问题 : All My SQL Queries，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38337807/