在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

＆＃13;

＆＃13;

<svg id="canvas" height=200 width=400 style="border: thin solid blue">
</svg>

＆＃13;

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)
      )
    }
)

＆＃13;

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

.gold {
    background-color: gold;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我在循环中是x，你可以点击

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

或者你可以只使用一个点击处理程序并检查你点击的内容是否是选中的

let color = document.querySelector('.main');
color.addEventListener('click', e => {
  if (e.target.classList.contains("main")) return
  var selected = color.querySelector(".gold")
  if (selected && selected!==e.target) selected.classList.remove('gold')
  e.target.classList.toggle('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

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


input[name="a"] {
  display:none
}

input[name="a"]:checked + label {
    background-color: gold;
}

<div class="main">
    <input type="radio" name="a" id="rb1"/><label class="color" for="rb1"></label>
    <input type="radio" name="a" id="rb2"/><label class="color" for="rb2"></label>
    <input type="radio" name="a" id="rb3"/><label class="color" for="rb3"></label>
    <input type="radio" name="a" id="rb4"/><label class="color" for="rb4"></label>
    <input type="radio" name="a" id="rb5"/><label class="color" for="rb5"></label>
</div>

Answer 3

let color = document.querySelectorAll('.color');
let length = color.length;
for (let i = 0; i < length; i++) {
    color[i].onclick = () => {
        for (let x = 0; x < length; x++) {
            if (i===x) continue
            color[x].classList.remove('gold');
        }
        color[i].classList.toggle('gold');
    }
}

Answer 4

将click事件附加到父div比每个孩子更高效，所以我对其他人的解决方案略有不同。

document.querySelector(".main").onclick = (event) => {

  let element = event.target;

  if (element.classList.contains("color")) {

    document.querySelector(".main")

    let isGold = false;
    if (element.classList.contains("gold")) {
      isGold = true;
    }

    document.querySelectorAll(".gold").forEach((color) => color.classList.remove("gold"));
    
    if (!isGold) {
      element.classList.add("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>

Answer 5

这是我的尝试：

document.body.addEventListener("click", function(event){
    console.log(Array.prototype.slice.call(document.querySelectorAll(".color")).filter(function(element) {
        return element !== event.target;
    })); // This should print all elements with the class "color" except the clicked one
});

编辑：再看一下这个问题之后，这更像是你想要做的吗？

document.body.addEventListener("click", function(event){
    event.target.classList.add("gold");
    Array.prototype.slice.call(document.querySelectorAll("color")).forEach(function(element) {
        if (element !== event.target)
            element.classList.remove("gold"); // Don't need to exist to remove apparently
    });
});

最终编辑（希望如此）：现在它的工作方式与您的演示完全相同。

document.querySelector(".main").addEventListener("click", (event) => {
    event.target.classList.toggle("gold");
    Array.prototype.slice.call(document.querySelectorAll(".color")).forEach((element) => {
        if (element !== event.target)
            element.classList.remove("gold");
    });
});

Answer 6

另一种方法......

＆＃13;

＆＃13;

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

let length = colors.length;

colors.forEach(function (color, index) {
  color.onclick = () => {
    colors.forEach(function(c, i) {
      c.classList[index === i ? "toggle" : "remove"]('gold');
    });
  };
});

＆＃13;

.main {
  display: flex;
  justify-content: center;
}

.color {
  margin: 5px;
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
}

.gold {
  background-color: gold;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用单选按钮：

＆＃13;

＆＃13;

let colors = document.querySelectorAll('[name="color"]');
var checked = -1;
colors.forEach(function(color, index) {
  color.onclick = () => {
    if (checked === index) {
      color.checked = false;
      checked = -1;
    } else
      checked = index;
  };
});

＆＃13;

.main {
  display: flex;
  justify-content: center;
}

label {
  margin: 5px;
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  background-color: white;
}

.gold {
  background-color: gold;
}

input[type="radio"] {
  display: none;
}

input:checked+label {
  background-color: gold;
}

＆＃13;

<div class="main">
  <input type="radio" id="radio1" name="color">
  <label for="radio1"></label>
  <input type="radio" id="radio2" name="color">
  <label for="radio2"></label>
  <input type="radio" id="radio3" name="color">
  <label for="radio3"></label>
  <input type="radio" id="radio4" name="color">
  <label for="radio4"></label>
  <input type="radio" id="radio5" name="color">
  <label for="radio5"></label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

我获取了具有相同类名的多个列表项。需要通过单击列表项显示/隐藏列表详细信息。下面的代码可能会帮助某人-

function getDetailMsg(clicked){
    var len = document.getElementsByClassName("msg-accordion").length;
    var acc = document.getElementsByClassName("msg-accordion");

    acc[clicked].classList.toggle("active");
    var panel = acc[clicked].nextElementSibling;
    if (panel.style.maxHeight){
        panel.style.maxHeight = null;
    } else {
        for (let x = 0; x < len; x++) {
            var oldpanel = acc[x].nextElementSibling;
            if (clicked!=x) { 
                oldpanel.style.maxHeight = null;
                acc[x].classList.remove('active'); 
            }
        }
        panel.style.maxHeight = panel.scrollHeight + "px";
    } 
}

<div class="list-group">
<div class="list-group-item justify-content-between msg-accordion" onclick="getDetailMsg('0');">Subject 1</div>
<div class="panel bg-warning text-white">Body 1</div>
<div class="list-group-item justify-content-between msg-accordion" onclick="getDetailMsg('1');">Subject 2</div>
<div class="panel bg-warning text-white">Body 2</div></div>