javascript - 在 JavaScript 中-选择具有相同类的所有元素-除了单击的元素

Question

在 JavaScript 中 - 选择具有相同类的所有元素 - 除了单击的元素

目前我得到了一个工作正常的结果，但正在检查一个聪明而简单的解决方案

使用 jquery not

也有类似的答案

let color = document.querySelectorAll('.color');

let length = color.length;

// for (let i = 0; i < length; i++) {
//     color[i].onclick = () => {
//         color[i].classList.toggle('gold');
//     }
// }



// if gold exists on clicked element then remove it  
// if gold not exists on clicked element then remove from all element and add only on clicked element
for (let i = 0; i < length; i++) {
    color[i].onclick = () => {
        if (color[i].classList.contains('gold')) {
            color[i].classList.toggle('gold');  // remove / toggle
        } else {
            for (let x = 0; x < length; x++) {
                color[x].classList.remove('gold');
            }
            color[i].classList.toggle('gold');  // add / toggle
        }
    }
}

.main {
    display: flex;
    justify-content: center;
}
.color {
    margin: 5px;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

.gold {
    background-color: gold;
}

<div class="main">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
</div>

demo

---

Answer 1

let color = document.querySelectorAll('.color')
let gold = 'gold'

color.forEach(
  (c) => c.onclick = (e) => {
      color.forEach(
        (c) => c.classList[e.target==c?'toggle':'remove'](gold)
      )
    }
)

.main {
    display: flex;
    justify-content: center;
}
.color {
    margin: 5px;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

.gold {
    background-color: gold;
}

<div class="main">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
</div>