如何为同class的div使用toggleClass且不影响其他元素？批量hover效果优化

我来帮你搞定这个问题！你的核心需求是让多组带有hover效果的盒子能独立触发切换，同时避免重复冗余的代码，对吧？咱们先拆解原代码的问题，再给出高效的优化方案。

原代码的问题分析 #

当前的jQuery逻辑使用了全局类选择器（$(".lsausschreibung")、$(".rsausschreibung")），这意味着当你添加多个.annonce容器时，hover其中一个盒子会触发所有同类型元素的类切换，无法实现组内独立生效的效果。

优化方案思路 #

我们需要把操作范围限定在当前hover元素所在的父容器内，利用jQuery的DOM遍历方法，实现“只影响当前组内元素”的效果，同时不需要给每个元素添加唯一ID。

1. 调整后的完整代码 #

<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
.annonce { 
  margin-left: 30px; 
  width: auto; 
  /* 给每个组加个间距，避免重叠 */
  margin-bottom: 20px;
} 
.lsausschreibung { 
  float: left; 
  position: relative; 
  margin-right: -10px; 
  background-color: white; 
  transition: all 0.5s ease-in-out; 
} 
.large { 
  height: 320px; 
  width: 280px; 
  z-index: 10; 
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
} 
.small { 
  height: 290px; 
  width: 230px; 
  z-index: 1; 
  margin-top: 15px; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
} 
.rsausschreibung { 
  float: left; 
  position: relative; 
  z-index: 1; 
  background-color: white; 
  transition: all 0.5s ease-in-out; 
}
/* 给盒子加个背景色方便看效果 */
.lsausschreibung, .rsausschreibung {
  border: 1px solid #eee;
}
</style>

<!-- 第一组盒子 -->
<div class="annonce"> 
  <div class="lsausschreibung large"> 左侧盒子1 </div> 
  <div class="rsausschreibung small"> 右侧盒子1 </div> 
</div>

<!-- 第二组盒子 -->
<div class="annonce"> 
  <div class="lsausschreibung large"> 左侧盒子2 </div> 
  <div class="rsausschreibung small"> 右侧盒子2 </div> 
</div>

<script>
// 给所有需要触发hover的盒子绑定事件
$(".lsausschreibung, .rsausschreibung").hover(function() { 
  // 找到当前hover元素所在的父容器.annonce
  const $parent = $(this).closest('.annonce');
  // 只在当前父容器内切换对应的类
  $parent.find(".lsausschreibung").toggleClass("small large"); 
  $parent.find(".rsausschreibung").toggleClass("small large"); 
}); 
</script>

2. 关键逻辑说明 #

• $(this)：获取当前触发hover事件的元素（可能是左侧或右侧盒子）。
• .closest('.annonce')：向上遍历DOM树，找到当前元素最近的.annonce父容器，这样就把操作范围限定在了当前组内。
• .find(selector)：在父容器内查找目标元素，确保只切换当前组内的lsausschreibung和rsausschreibung的类。

3. 扩展便利性 #

现在你只需要复制.annonce容器的HTML结构，就能新增任意多组独立的hover盒子，不需要修改JS或CSS代码，完全实现了代码复用，避免了冗余。

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