在JavaScript中-选择所有具有相同类的元素-单击除外 [英] in JavaScript - select all elements with same class - except clicked one

问题描述

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

in JavaScript - select all elements with same class - except clicked one

当前，我得到的结果很好，但是检查

currently i am getting a result that works fine, but checking for a smart and simple solution

使用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>

演示

推荐答案

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>

这篇关于在JavaScript中-选择所有具有相同类的元素-单击除外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！