Question

使用ES6箭头功能，我试图在共享相同类名的多个锚链接中的任何一个上应用悬停状态。但是以下内容仅在我将鼠标悬停在第一个元素上而不是其他元素上时有效。这种逻辑我缺少什么？

HTML：

 <nav id="demo-links">
   <a href="/" class="mlink">Link A</a>
   <a href="/" class="mlink">Link B</a>
   <a href="/" class="mlink">Link C</a>
   <a href="/" class="mlink">Link D</a>
 </nav>

JavaScript：

let mItem = document.querySelector(".mlink");
mItem.onmouseover = () => mItem.setAttribute("target", "_blank");
mItem.onmouseout = () => mItem.removeAttribute("target");

Answer 1

该事件适用于第一个元素，因为

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果没有找到匹配项，则返回null。

改为使用querySelectorAll()。

Element方法querySelectorAll()返回一个静态（非实时）NodeList，该NodeList表示与指定选择器组匹配的文档元素列表。

您可以使用forEach()遍历所有li来分别设置事件：

let mItem = document.querySelectorAll(".mlink");
mItem.forEach(function(el){
  el.onmouseover = () => el.setAttribute("target", "_blank");
  el.onmouseout = () => el.removeAttribute("target");
});

<nav id="demo-links">
   <a href="/" class="mlink">Link A</a>
   <a href="/" class="mlink">Link B</a>
   <a href="/" class="mlink">Link C</a>
   <a href="/" class="mlink">Link D</a>
</nav>

如何使用onmouseover和onmouseout在多个元素上应用事件处理

1 个答案: