如何用单个JavaScript函数操作多个元素并实现悬停切换类？

要搞定单个函数作用于所有目标元素的需求，借助容器+事件委托是最高效的方案——不用给每个元素挨个绑事件，还能兼容后续动态添加的元素。

1. 先搭好HTML结构 #

把所有需要交互的元素塞进同一个容器里，给容器和目标元素分别加类名方便识别：

<div class="item-container">
  <div class="target-item">元素1</div>
  <div class="target-item">元素2</div>
  <div class="target-item">元素3</div>
</div>

2. 写好要切换的CSS样式 #

比如定义一个悬停时生效的高亮类：

.target-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px 0;
  transition: all 0.3s;
}

.hover-active {
  background-color: #f0f8ff;
  border-color: #42b983;
}

3. 核心JavaScript代码 #

只需要给容器绑定一次事件，利用事件冒泡机制，在单个函数里处理所有目标元素的交互：

// 获取容器节点
const container = document.querySelector('.item-container');

// 单个处理函数，所有元素的交互都走这里
function toggleHoverClass(e) {
  // 先判断触发事件的是不是我们要处理的目标元素
  const targetElement = e.target;
  if (targetElement.classList.contains('target-item')) {
    // 切换类名
    targetElement.classList.toggle('hover-active');
  }
}

// 绑定鼠标进入和离开事件（如果需要 hover 进加类、离开删类，就分开绑这两个事件）
container.addEventListener('mouseenter', toggleHoverClass);
container.addEventListener('mouseleave', toggleHoverClass);

// 如果是点击切换类名，就换成绑定click事件：
// container.addEventListener('click', toggleHoverClass);

为什么用这种方式？ #

• 不用循环遍历所有子元素绑定事件，代码更简洁，元素多的时候性能更好
• 后续动态添加到容器里的target-item元素，自动就能触发这个函数，不用重新写绑定逻辑

内容的提问来源于stack exchange，提问作者VIBORA The coder