javascript - 在 vanilla javascript 中实现 siblings()

Question

我正在尝试在 vanilla js 中做 siblings() 在 jQuery 中做的事情。我在这里看到了很多有用的解释，但在我的代码中实现它们时遇到了麻烦。

我有一个 div，里面有 4 个按钮。每次我单击一个按钮时，都会向该按钮添加一个类 (.btn-anim)(到目前为止一切正常)。我想要做的是当我单击其中一个按钮(还没有该类)时删除任何其他按钮的类并将其添加到单击的按钮。

我的 Html 标记:

<div id="js-colors-div">
  <button class="yellow"></button>
  <button class="green"></button>
  <button class="blue"></button>
  <button class="pink"></button>
</div>

还有 Js:

var colorsDiv = document.getElementById('js-colors-div'); 
var colors = colorsDiv.getElementsByTagName("button");

for (var i = 0; i < colors.length; i++) {                   
    colors[i].onclick = function(e) {                                

    var highlight = e.target;

    //trying to achieve this         
    $(this).addClass('btn-anim').siblings().removeClass('btn-anim');          

    }
};

这是我添加类的代码

highlight.classList.add('btn-anim'); // 

Answer 1

在普通 JS 中，您可以遍历父级的子级并跳过元素本身。您可以使用 classList 方法来添加/删除类:

    this.classList.add('btn-anim');
    for (let sibling of this.parentNode.children) {
        if (sibling !== this) sibling.classList.remove('btn-anim');
    }

但是请注意，您可以(也在 jQuery 中)稍微简化一下:只需从所有按钮中删除该类，然后将其添加到当前按钮中:

    for (let sibling of this.parentNode.children) {
        sibling.classList.remove('btn-anim');
    }
    this.classList.add('btn-anim');