纯JS实现点击按钮切换父元素class（适配多同class元素场景）

原生JS实现（无任何依赖） #

不需要给每个元素单独加id，直接通过class批量匹配即可，支持页面任意数量的.item元素，新增/删除item节点不需要修改JS逻辑。
对应代码如下：

<!-- 可任意放置多个同结构的.item元素 -->
<div class="item">
  <button class="zoomer">切换缩放</button>
</div>
<div class="item">
  <button class="zoomer">切换缩放</button>
</div>

// 匹配页面所有.zoomer按钮
const allZoomBtns = document.querySelectorAll('.zoomer');
// 给每个按钮绑定点击事件
allZoomBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 定位当前按钮所属的最近父级.item元素，中间嵌套其他标签也不会匹配错误
    const currentItem = this.closest('.item');
    // 切换zoom类：存在则移除，不存在则添加
    currentItem.classList.toggle('zoom');
  })
})

注意：相比直接取parentElement，用closest()向上查找匹配父级的容错率更高，后续调整DOM结构（比如按钮外层套其他容器标签）时不需要改事件逻辑。

如果页面的.item是动态新增的（比如异步加载、用户操作后追加的DOM），可以用事件委托写法，不需要重复给新元素绑定事件：

// 事件委托兼容动态元素
document.body.addEventListener('click', function(e) {
  if(e.target.classList.contains('zoomer')) {
    e.target.closest('.item').classList.toggle('zoom');
  }
})

jQuery 简化写法 #

如果项目里已经引入了jQuery，代码可以更简洁：

$('.zoomer').click(function() {
  $(this).closest('.item').toggleClass('zoom');
})

常见踩坑 #

• 不要用document.querySelector('.zoomer')，这个方法只会匹配页面第一个符合条件的按钮，必须用querySelectorAll才能拿到所有同class的按钮集合
• 不要在点击事件里直接全局选中所有.item操作，必须通过当前点击的按钮向上找对应的父级，否则会同时修改所有item的类名
• 不要硬编码父级层级（比如连续写多个parentElement），DOM层级调整后逻辑会直接失效

测试用参考CSS #

可以直接加这段样式验证效果：

.item {
  width: 180px;
  height: 180px;
  margin: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.item.zoom {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

内容的提问来源于stack exchange，提问作者Gareth Horner