单击所有div后，如何更改CSS？
单击所有div后，如何更改CSS？
提问于 2021-12-27 08:17:49
我试图改变所有的div的背景色，一旦他们被点击。这段代码允许更改发生，但是我可以点击相同的div 3次并获得相同的输出。有人知道解决这个问题的好办法吗？谢谢!
var boxes = document.querySelectorAll('.boxes')
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
var box3 = document.querySelector('#box3')
var clickCounter = 0
function handleColor (box){
box.style.backgroundColor = 'red';
clickCounter = clickCounter + 1
console.log(clickCounter);
if (clickCounter > 2) {
reset()
}
}
for (let i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", () => handleColor(boxes[i]));
}
function reset() {
box1.style.backgroundColor = 'green'
box2.style.backgroundColor = 'green'
box3.style.backgroundColor = 'green'
}.boxes {
width: 200px;
height: 200px;
outline: 1px solid black;
} <div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>
<div class="boxes" id="box3"></div>
回答 2
Stack Overflow用户
发布于 2021-12-27 08:35:19
您将需要标记每个各自的框，以控制它是否已被单击至少一次。
在这种情况下，您可以使用类.clicked作为标志，以控制是否应该重置，但也用于样式设置。
var boxes = document.querySelectorAll('.boxes');
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
var box3 = document.querySelector('#box3');
function handleColor (box){
box.classList.add('clicked');
if (box1.classList.contains("clicked") && box2.classList.contains("clicked") && box3.classList.contains("clicked")) {
reset();
}
}
for (let i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", () => handleColor(boxes[i]));
}
function reset() {
box1.style.backgroundColor = 'green';
box2.style.backgroundColor = 'green';
box3.style.backgroundColor = 'green';
for (let i = 0; i < boxes.length; i++) {
boxes[i].classList.remove('clicked');
}
}.boxes {
width: 200px;
height: 200px;
outline: 1px solid black;
}
.boxes.clicked {
background: red;
}Stack Overflow用户
发布于 2021-12-27 08:46:46
您需要记住每个框是否已被单击，然后在单击一个框时，遍历所有其他框，以查看它们是否都已被单击。
有几种方法可以记住:在JS或HTML中使用CSS类。
此片段通过在单击box元素时将值为1的属性'hasBeenClicked‘添加到box元素中来记忆。
var boxes = document.querySelectorAll('.boxes')
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
var box3 = document.querySelector('#box3')
function handleColor(box) {
box.style.backgroundColor = 'red';
box.setAttribute('hasBeenClicked', 1);
let clickCounter = 0;
boxes.forEach(box => {
clickCounter += (box.getAttribute('hasBeenClicked') == 1) ? 1 : 0;
});
if (clickCounter == boxes.length) {
reset()
}
}
for (let i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", () => handleColor(boxes[i]));
}
function reset() {
box1.style.backgroundColor = 'green'
box2.style.backgroundColor = 'green'
box3.style.backgroundColor = 'green'
}.boxes {
width: 200px;
height: 200px;
outline: 1px solid black;
}<div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>
<div class="boxes" id="box3"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70493116
复制相关文章
相似问题
腾讯云开发者
