使用 JavaScript 通过 ID 匹配不同父元素中的元素（鼠标悬停时）

本文介绍如何使用 JavaScript 实现当鼠标悬停在一个 `div.first` 中的 `li` 元素上时，为 `div.second` 中具有相同 ID 的 `li` 元素添加 `.active` 类。该方案适用于 ID 动态生成且事先未知的情况，并提供详细的 JavaScript 代码示例和 CSS 样式，方便读者理解和应用。

在 Web 开发中，有时我们需要实现一种交互效果：当鼠标悬停在一个区域的元素上时，另一个区域的对应元素也发生变化。本文将介绍如何使用 JavaScript 实现这一功能，具体来说，当鼠标悬停在一个 div.first 中的 li 元素上时，为 div.second 中具有相同 ID 的 li 元素添加 .active 类。

实现原理

核心思想是利用 JavaScript 监听 div.first 中所有 li 元素的 mouseover 和 mouseout 事件。当 mouseover 事件触发时，获取当前 li 元素的 ID，然后在 div.second 中查找具有相同 ID 的 li 元素，并添加 .active 类。当 mouseout 事件触发时，移除 .active 类。

代码实现

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

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

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");
  });
});

这段代码首先使用 querySelectorAll 方法获取所有位于 .first 类下的 ul 元素中的 li 元素。然后，使用 forEach 方法遍历这些 li 元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。

在 mouseover 事件监听器中，e.target.id 获取当前鼠标悬停的 li 元素的 ID。然后，使用 querySelectorAll(#${e.target.id}) 查找具有相同 ID 的所有元素。由于我们需要操作的是 div.second 中的元素，因此我们使用 [1] 来获取第二个匹配的元素（第一个匹配的元素是 div.first 中的 li 元素本身）。最后，使用 classList.add("active") 为该元素添加 .active 类。

腾讯元宝

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

223

查看详情

mouseout 事件监听器中的逻辑类似，只是将 classList.add("active") 替换为 classList.remove("active")，用于移除 .active 类。

HTML 结构

以下是 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 类生效，我们需要定义相应的 CSS 样式：

.active {
  background: #CCC;
}

这段 CSS 代码会将具有 .active 类的元素的背景色设置为灰色。

注意事项

• ID 唯一性： 此方法依赖于 ID 的唯一性。确保页面上所有 li 元素的 ID 都是唯一的，否则可能会导致意外的结果。
• 性能优化： 如果页面上有大量的 li 元素，频繁的 querySelectorAll 操作可能会影响性能。可以考虑使用事件委托等技术进行优化。
• 适用场景： 此方法适用于 ID 动态生成且事先未知的情况。如果 ID 是静态的，可以使用 CSS :hover 伪类和相邻兄弟选择器等方法来实现类似的效果，性能更高。

总结

本文介绍了如何使用 JavaScript 实现当鼠标悬停在一个 div.first 中的 li 元素上时，为 div.second 中具有相同 ID 的 li 元素添加 .active 类。该方案适用于 ID 动态生成且事先未知的情况，并提供了详细的代码示例和注意事项。希望本文能够帮助读者更好地理解和应用 JavaScript 技术。

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