点击#label-it区域（含内部#klapp）切换#klapp类的jQuery问题

首先得指出你代码里的两个核心问题：

• HTML重复ID违反规范：你给多个元素用了相同的id="label-it"和id="klapp"，但HTML里ID必须是唯一的——浏览器只会匹配第一个带该ID的元素，这就是最初代码只改第一个的原因。
• DOM选择器路径错误：你用了$(this).next(".filter-panel")，但看你的结构，.filter-panel是点击元素（.label-it）的子元素，不是相邻兄弟元素，next()是找同级下一个元素，自然找不到目标。

完整修正方案 #

第一步：修正HTML（把重复ID改为class）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 把id="label-it"改为class="label-it"，id="klapp"改为class="klapp" -->
<div class="label-it">
  <label class="filter-panel">
    <div class="klapp"></div>
  </label>
</div>
<div class="label-it">
  <label class="filter-panel">
    <div class="klapp"></div>
  </label>
</div>
<div class="label-it">
  <label class="filter-panel">
    <div class="klapp"></div>
  </label>
</div>
<div class="label-it">
  <label class="filter-panel">
    <div class="klapp"></div>
  </label>
</div>

第二步：修正jQuery代码（选择正确的子元素，简化类切换）

// 给所有.label-it绑定点击事件
$('.label-it').click(function() {
  // 找到当前点击元素下的.klapp元素，切换两个类名
  $(this).find('.klapp').toggleClass('klapp klappe');
});

代码解释 #

1. 用class替代重复ID：这样jQuery可以选中所有.label-it元素，每个元素都能独立响应点击事件。
2. find()替代next()：find('.klapp')会在当前点击的.label-it内部精准查找目标元素，确保只操作当前区块下的折叠元素。
3. 简化类切换：toggleClass('klapp klappe')可以一次性完成两个类的切换——如果元素有klapp就移除它并添加klappe，反之亦然，比分开两次调用更简洁高效。

这样修改后，每个.label-it区块被点击时，只会切换自身内部的折叠元素的类名，完全符合你的需求。

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