在原生JavaScript中实现jQuery siblings()功能及按钮类切换

嘿，我完全懂你想要实现的效果——点击某个未选中的按钮时，让它带上.btn-anim类，同时把其他兄弟按钮的这个类都移除，这不就是jQuery里siblings().removeClass()加上当前元素addClass的组合嘛！用原生JS完全可以轻松实现，我给你拆解几种实用的写法：

先明确你的场景（假设HTML结构是这样） #

首先还原一下你的页面结构，应该类似这样对吧：

<div class="btn-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
</div>

方法1：直接操作所有按钮（最简洁） #

这种写法最直接，先获取所有按钮的集合，点击时先把所有按钮的.btn-anim类移除，再给当前点击的按钮加上：

// 获取所有按钮元素
const allButtons = document.querySelectorAll('.btn-container button');

// 给每个按钮绑定点击事件
allButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 第一步：移除所有按钮的目标类
    allButtons.forEach(btn => btn.classList.remove('btn-anim'));
    // 第二步：给当前点击的按钮添加类
    this.classList.add('btn-anim');
  });
});

这种方式代码短、逻辑清晰，适合按钮数量不多且都是静态渲染的场景。

方法2：模拟jQuery的siblings()方法（更贴近需求） #

如果你想专门实现一个类似siblings()的函数，以后可以复用，那可以写一个工具函数来获取当前元素的所有兄弟节点（排除自己）：

// 模拟jQuery siblings()的工具函数
function getSiblings(element) {
  // 先获取父元素的所有子节点，然后过滤掉当前元素和非元素节点（比如空格文本节点）
  return Array.from(element.parentElement.children).filter(child => child !== element);
}

// 然后绑定点击事件
const allButtons = document.querySelectorAll('.btn-container button');

allButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮的所有兄弟按钮
    const siblingButtons = getSiblings(this);
    // 移除兄弟按钮的目标类
    siblingButtons.forEach(sibling => sibling.classList.remove('btn-anim'));
    // 给当前按钮加类
    this.classList.add('btn-anim');
  });
});

这个getSiblings函数完全复刻了jQuerysiblings()的功能，返回当前元素的所有同级兄弟元素，以后其他地方需要操作兄弟节点时也能直接用。

方法3：事件委托（适合动态生成按钮的场景） #

如果你的按钮是通过JS动态添加到页面的（比如点击某个按钮新增一个按钮），那上面两种给静态元素绑定事件的方式就失效了，这时候用事件委托更靠谱：

// 获取按钮的父容器
const btnContainer = document.querySelector('.btn-container');

// 给父容器绑定点击事件
btnContainer.addEventListener('click', function(e) {
  // 判断点击的是不是按钮元素
  if (e.target.tagName === 'BUTTON') {
    // 移除容器内所有按钮的目标类
    this.querySelectorAll('button').forEach(btn => btn.classList.remove('btn-anim'));
    // 给当前点击的按钮加类
    e.target.classList.add('btn-anim');
  }
});

事件委托的好处是不用给每个按钮单独绑定事件，不管按钮是静态还是动态生成的，只要在父容器内，点击事件都能触发。

关键知识点提醒 #

• 操作类名一定要用classListAPI，它比直接修改className更安全，不会覆盖元素原有的其他类
• 用querySelectorAll获取元素集合时，返回的是一个类数组，现代浏览器支持直接用forEach遍历，低版本浏览器可能需要转成数组

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