单击所有 div 后如何更改 CSS答案

【问题标题】：once all divs have been clicked how do you change the CSS单击所有 div 后如何更改 CSS
【发布时间】：2022-01-26 06:41:39
【问题描述】：

我正在尝试更改所有 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>

【问题讨论】：

您的问题是模棱两可的：“一旦点击了所有 div，就更改它们的背景颜色”可能意味着一旦 any 更改 all div单击，或仅在所有被单击一次 - 或介于两者之间的任何内容。请澄清。

标签： javascript css

【解决方案1】：

您需要标记每个相应的框，以便控制它是否至少被点击过一次。

在这种情况下，您可以使用 .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;
}

【讨论】：

【解决方案2】：

您需要记住每个框是否已被单击，然后在单击一个框时查看所有其他框以查看它们是否都已被单击。

有几种记忆方式：使用 CSS 类、在 JS 中或在 HTML 中。

这个sn-p通过在一个盒子元素被点击时添加一个值为1的属性'hasBeenClicked'来记住它。

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>

【讨论】：