Express+Node.js中EJS循环渲染div时mouseover事件异常求助

嘿，我一看你的代码就知道问题出在哪了——你的jQuery选择器太宽泛了！当你用$(".popup")的时候，它会选中页面上所有带popup类的元素，所以不管你悬停哪个.imgdiv，所有弹窗都会一起显示/隐藏。

问题核心 #

每个.imgdiv和它对应的.popup是嵌套在同一个.arrowdiv里的，你需要只找到当前悬停元素所在容器内的那个弹窗，而不是全局所有的弹窗。

修复步骤 #

修改你的jQuery代码，把全局选择器改成基于当前元素的相对选择：

<script>
$(".imgdiv").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
  // 先定位到当前imgdiv的父容器.arrowdiv，再找里面的popup
  $(this).closest('.arrowdiv').find(".popup").toggle('slow');
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
  // 同样只操作当前对应的弹窗
  $(this).closest('.arrowdiv').find(".popup").hide();
});
</script>

这里用closest('.arrowdiv')精准定位到当前.imgdiv的父容器，再用find(".popup")锁定该容器内的弹窗，这样就只会触发当前悬停元素对应的弹窗了。

额外优化建议 #

• 你在EJS循环里给多个元素用了相同的id="popup"和id="imgdiv"，这违反了HTML规范——id必须是全局唯一的！赶紧把这些重复的id去掉，只用class即可，避免后续出现其他奇怪的兼容性问题。
• 可以考虑用mouseenter和mouseleave代替mouseover和mouseout，前者不会因为子元素的事件冒泡而反复触发，交互体验更流畅。

修正后的EJS片段（移除重复id） #

<% for (let a=0; a < 2; a++){%>
<ul class="innerdiv" >
  <li class="arrowdiv" >
    <!-- 移除重复的id="imgdiv" -->
    <img src='images/orangearrow.png' alt="" class='imgdiv' data-src='images/orangearrow.png' data-hover='images/whitearrow.png'/>
    <!-- 移除重复的id="popup" -->
    <ul class="popup" >
      <li class="col1">1 </li>
      <li class="col2">2 </li>
      <li class="col3"> 3 </li>
      <li class="col4"> <img src="images/blackarrow.png" alt="" class="col4"/> </li>
    </ul>
  </li>
  <li class="artdiv" >
    <ul>
      <li class="contentdiv"><%= a %></li>
      <li class="rcontentdiv">image</li>
      <li class="ccontentdiv"><%= a %></li>
    </ul>
  </li>
</ul>
<%} %>

这样修改之后，你悬停哪个.imgdiv，就只会显示对应的那个弹窗啦！

内容的提问来源于stack exchange，提问作者Kelly Blue