使用 JavaScript 实现鼠标悬停时根据 ID 匹配不同父元素下的元素

本文旨在提供一种使用 JavaScript 在鼠标悬停时，根据 ID 匹配不同父元素下的元素并添加/移除类名的解决方案。当鼠标悬停在 `.first` 区域的 `li` 元素上时，脚本将查找 `.second` 区域中具有相同 ID 的 `li` 元素，并为其添加 `.active` 类。移开鼠标时，则移除该类。本文将详细介绍实现步骤，并提供代码示例和注意事项。

实现原理

核心思路是：

1. 选取第一个区域（.first）下的所有 li 元素。
2. 为每个 li 元素添加 mouseover 和 mouseout 事件监听器。
3. 当 mouseover 事件触发时，获取当前 li 元素的 ID。
4. 使用该 ID 在整个文档中查找第二个具有相同 ID 的元素。
5. 为找到的元素添加 active 类。
6. 当 mouseout 事件触发时，移除找到的元素的 active 类。

代码实现

以下是完整的 JavaScript 代码实现：

document.querySelectorAll(".first ul li").forEach(li => {
  li.addEventListener("mouseover", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.add("active");
  });
  li.addEventListener("mouseout", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.remove("active");
  });
});

代码解释：

立即学习“Java免费学习笔记（深入）”；

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

• document.querySelectorAll(".first ul li"): 选取所有 .first 类下的 ul 元素中的 li 元素。
• .forEach(li => { ... }): 遍历选取的每个 li 元素。
• li.addEventListener("mouseover", e => { ... }): 为每个 li 元素添加 mouseover 事件监听器。e 是事件对象，包含了事件的详细信息。
• e.target.id: 获取触发 mouseover 事件的元素的 ID。
• document.querySelectorAll(\#${e.target.id}`)[1]: 使用 ID 选择器#{e.target.id}查找具有相同 ID 的元素。querySelectorAll返回一个 NodeList，包含所有匹配的元素。[1]` 选取 NodeList 中的第二个元素，因为第一个元素是触发事件的元素本身。
• .classList.add("active"): 为选中的元素添加 active 类。
• li.addEventListener("mouseout", e => { ... }): 为每个 li 元素添加 mouseout 事件监听器。
• .classList.remove("active"): 为选中的元素移除 active 类。

HTML 结构示例：

<div class="first">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

<div class="second">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

CSS 样式示例：

.active {
  background: #CCC;
}

这段 CSS 代码定义了 active 类的样式，这里简单地设置了背景颜色为灰色。你可以根据需要自定义样式。

注意事项

• ID 唯一性： 此方法依赖于 ID 的唯一性。如果页面中存在多个相同 ID 的元素，可能会导致意料之外的结果。确保所有 li 元素的 ID 在页面中是唯一的。
• 性能考虑： 如果页面中的 li 元素数量非常多，频繁的 querySelectorAll 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧来提高性能。
• 错误处理： 如果 .second 区域中不存在具有相同 ID 的元素，document.querySelectorAll(\#${e.target.id}`)[1]将返回undefined`。在实际应用中，建议添加错误处理机制，以避免潜在的错误。例如，可以先判断元素是否存在，再添加/移除类名。

总结

本文提供了一种使用 JavaScript 在鼠标悬停时，根据 ID 匹配不同父元素下的元素并添加/移除类名的解决方案。通过为 .first 区域的 li 元素添加事件监听器，并使用 querySelectorAll 查找具有相同 ID 的元素，可以实现灵活的交互效果。在实际应用中，请注意 ID 的唯一性、性能以及错误处理，以确保代码的稳定性和可靠性。

以上就是使用 JavaScript 实现鼠标悬停时根据 ID 匹配不同父元素下的元素的详细内容，更多请关注php中文网其它相关文章！