纯JavaScript实现点击按钮切换指定class 仅展开当前条目编辑区

核心逻辑只需要3步，完全不依赖ID选择器，纯原生JS即可实现：

• 给所有Edit按钮加统一标识类，方便事件识别，避免和同区域的Finished/Delete按钮混淆
• 监听点击事件，优先用事件委托绑定到外层书架容器，后续动态新增书籍条目也能生效，不用重复绑定
• 触发点击时先全局收起所有展开的编辑区，再定位当前按钮所属书籍条目下的编辑区，单独展开即可

代码实现 #

1. HTML微调（仅需给Edit按钮加标识类） #

现有结构无需大改，只需要给Edit按钮加上专属类btn_edit即可，参考结构如下：

<div class="book_shelf">
  <!-- 单个书籍条目 -->
  <div class="book_item">
    <div class="book_info">书籍名称1</div>
    <div class="action_area">
      <button class="btn_finish">Finished</button>
      <!-- 给Edit按钮加专属标识类 -->
      <button class="btn_edit">Edit</button>
      <button class="btn_delete">Delete</button>
    </div>
    <!-- 编辑区默认隐藏 -->
    <div class="input_section edit_section">
      <input type="text" placeholder="修改书籍名称">
      <button class="btn_save">保存</button>
    </div>
  </div>
  <!-- 其余book_item结构和上述一致 -->
</div>

2. 现有CSS无需改动 #

.edit_section {
  margin-top: 20px;
  display: none;
}
.edit_section.active {
  display: block;
}

3. JS交互逻辑 #

将以下代码放在页面</body>标签前，或者DOM加载完成回调中执行即可：

// 事件委托绑定到外层书架容器，性能更优
const bookShelf = document.querySelector('.book_shelf');
bookShelf.addEventListener('click', function(e) {
  const clickedTarget = e.target;
  // 过滤非Edit按钮的点击操作
  if (!clickedTarget.classList.contains('btn_edit')) return;

  // 第一步：全局收起所有已展开的编辑区
  document.querySelectorAll('.edit_section.active').forEach(section => {
    section.classList.remove('active');
  });

  // 第二步：定位当前按钮所属的书籍条目
  const currentBookItem = clickedTarget.closest('.book_item');
  // 第三步：展开当前条目下的编辑区
  const currentEditArea = currentBookItem.querySelector('.edit_section');
  currentEditArea.classList.add('active');
})

实现细节说明 #

• closest('.book_item')会从当前点击的按钮开始，向上查找最近的匹配.book_item的祖先元素，精准定位按钮所属的单本书籍条目，不会影响其他条目
• 事件委托的绑定方式比循环给每个Edit按钮绑事件性能更好，后续如果做动态新增书籍功能，新条目的Edit按钮不用重新绑定事件就能直接生效
• 全局收起逻辑放在展开当前项之前，保证同一时间最多只有一个编辑区处于展开状态，完全匹配需求

如果不想给Edit按钮加额外类，也可以通过按钮文本判断（比如clickedTarget.textContent.trim() === 'Edit'），但加专属类的方式更稳定，不会因为后续修改按钮文案导致功能失效。

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