在原版 javascript 中實現兄弟姐妹（）

Question

我正在嘗試在 vanilla js 中做兄弟姐妹（）在 jQuery 中所做的事情。 我在這里看到了很多有用的解釋，但是在我的代碼中實現它們時遇到了麻煩。

我有一個 div，里面有 4 個按鈕。 每次我單擊一個按鈕時，都會將 class (.btn-anim) 添加到該按鈕（到目前為止這工作正常）。 我想要做的是當我單擊其中一個按鈕（已經沒有 class）以刪除任何其他按鈕的 class 並將其添加到單擊的按鈕。

我的 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');          

    }
};

這是我添加 class 的代碼

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

Answer 1

在 vanilla 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');

Answer 2

您可以使用previousElementSibling和nextElementSibling元素。

 var colorsDiv = document.getElementById('js-colors-div'); var colors = colorsDiv.getElementsByTagName("button"); for (var i = 0; i < colors.length; i++) { colors[i].addEventListener('click', function(e) { var highlight = e.target; //trying to achieve this this.classList.add('btn-anim'); addClassSiblings.bind(this, 'btn-anim')(); }); } function addClassSiblings(classNames) { var cs = this.nextElementSibling; while(cs) { cs.classList.remove(classNames); cs = cs.nextElementSibling; } cs = this.previousElementSibling; while(cs) { cs.classList.remove(classNames); cs = cs.previousElementSibling; } }

 .yellow { color: yellow } .pink { color: pink } .green { color: green } .blue { color: blue } .btn-anim { color: black }

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

Answer 3

 const colorsDiv = document.getElementById('js-colors-div'); const children = [...colorsDiv.children]; children.forEach((el) => { el.addEventListener('click', (e) => { children.forEach((btn) => { btn.classList.remove('active'); }) e.target.classList.add('active'); }); });

 button { color: white } .yellow { background: #ffaf00 } .pink { background: pink } .green { background: green } .blue { background: blue } .active { background: black }

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

Answer 4

jQuery 中的 .siblings() 還允許您使用選擇器參數來定位特定的兄弟姐妹，我認為這沒有得到解決。

const getSiblings = (el, sel) => {
    let siblings = [];
    let targets;
    if (sel)
        targets = el.parentNode.querySelector(':scope > ' + sel)
    else
        targets = el.parentNode.children;

    for (let target of targets) {
        if (target !== el)
            siblings.push(target);
    }
    return siblings;
}

然后這可以像這樣用於OP的用例......

const removeAnimClass = (ev) => {
    let siblings = getSiblings(ev.currentTarget, '.btn-anim');
    for (let sibling of siblings) {
        sibling.classList.remove('btn-anim');
}

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

for (let colorBtn of colorBtns) {                   
    colorBtn.onclick = removeAnimClass;
}

Answer 5

試試這個：- 給所有 btns 相同的 class（例如檢查）然后循環它們，一旦進入循環，您將創建另一個循環，它將從所有 btns 中刪除 class（檢查），然后它只會添加到你的那個點擊

 const rates = document.querySelectorAll(".rate"); for (const rate of rates) { rate.addEventListener("click", function () { for (const i of rates) { i.classList.remove("checked"); } rate.classList.add("checked"); }); }

 <ul class="rating-box"> <li><button class="rate rate-1">1</button></li> <li><button class="rate rate-2">2</button></li> <li><button class="rate rate-3">3</button></li> <li><button class="rate rate-4">4</button></li> <li><button class="rate rate-5">5</button></li> </ul>