如何在相邻父元素（前/后）中添加或移除class类

根据你提供的HTML结构，我会分两种常见场景来实现向前/向后添加/移除class的功能，用原生JavaScript实现，不需要依赖任何框架~

场景1：在多个.part父容器之间切换激活类 #

比如我们需要给当前“激活”的.part添加active类，点击“上一个”“下一个”按钮时，把active类转移到对应的.part容器上。

补充后的HTML结构 #

<button id="prevPart">上一个.part</button>
<button id="nextPart">下一个.part</button>

<div class='part active'>
  <div class='title'>title 1</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
</div>
<div class='part'>
  <div class='title'>title 2</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
</div>
<div class='part'>
  <div class='title'>title 3</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
</div>

JavaScript 实现代码 #

// 获取操作按钮和所有part容器
const prevBtn = document.getElementById('prevPart');
const nextBtn = document.getElementById('nextPart');
const parts = document.querySelectorAll('.part');

// 辅助函数：找到当前激活的part
function getCurrentActivePart() {
  return document.querySelector('.part.active');
}

// 上一个按钮逻辑
prevBtn.addEventListener('click', () => {
  const current = getCurrentActivePart();
  const prevPart = current.previousElementSibling;
  
  // 检查是否存在有效上一个part元素
  if (prevPart && prevPart.classList.contains('part')) {
    current.classList.remove('active');
    prevPart.classList.add('active');
  }
});

// 下一个按钮逻辑
nextBtn.addEventListener('click', () => {
  const current = getCurrentActivePart();
  const nextPart = current.nextElementSibling;
  
  // 检查是否存在有效下一个part元素
  if (nextPart && nextPart.classList.contains('part')) {
    current.classList.remove('active');
    nextPart.classList.add('active');
  }
});

场景2：在单个.part内部的.postitle元素之间切换类 #

比如在当前激活的.part里，给某个.postitle添加highlight类，点击按钮时把这个类转移到前一个/后一个.postitle上。

补充后的HTML结构 #

<button id="prevPostitle">上一个.postitle</button>
<button id="nextPostitle">下一个.postitle</button>

<div class='part active'>
  <div class='title'>title 1</div>
  <div class='postitle highlight'>323</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
</div>
<div class='part'>
  <div class='title'>title 2</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
  <div class='postitle'>323</div>
</div>

JavaScript 实现代码 #

// 获取操作按钮
const prevPostBtn = document.getElementById('prevPostitle');
const nextPostBtn = document.getElementById('nextPostitle');

// 辅助函数：找到当前激活part里的高亮postitle
function getCurrentHighlightPostitle() {
  return document.querySelector('.part.active .postitle.highlight');
}

// 上一个按钮逻辑
prevPostBtn.addEventListener('click', () => {
  const current = getCurrentHighlightPostitle();
  const prevPost = current.previousElementSibling;
  
  // 检查是否是有效的postitle元素
  if (prevPost && prevPost.classList.contains('postitle')) {
    current.classList.remove('highlight');
    prevPost.classList.add('highlight');
  }
});

// 下一个按钮逻辑
nextPostBtn.addEventListener('click', () => {
  const current = getCurrentHighlightPostitle();
  const nextPost = current.nextElementSibling;
  
  // 检查是否是有效的postitle元素
  if (nextPost && nextPost.classList.contains('postitle')) {
    current.classList.remove('highlight');
    nextPost.classList.add('highlight');
  }
});

额外实用提示 #

• 如果需要循环切换（比如最后一个.part点击下一个回到第一个），可以修改逻辑：当nextPart不存在时，选中第一个.part；同理上一个不存在时选中最后一个。
• 可以用classList.toggle()简化代码，但这里因为是“转移”类（移除旧的、添加新的），用remove+add逻辑更清晰。
• 如果需要绑定键盘事件（比如左右箭头触发切换），只需要把按钮的逻辑绑定到keydown事件即可。

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