單擊所有div后，如何更改CSS

我試圖改變背景顏色為所有的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>
   

uj5u.com熱心網友回復：

您需要標記每個相應的框并控制它是否至少被單擊過一次。

在這種情況下，您可以使用該類.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;
}

uj5u.com熱心網友回復：

您需要記住每個框是否已被單擊，然后在單擊一個框時查看所有其他框以查看它們是否都已被單擊。

有幾種記憶方式：使用 CSS 類、在 JS 中或在 HTML 中。

該代碼段通過在單擊時將值為 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>

標籤：javascript css

上一篇：用Express渲染ejs模板的問題

下一篇：state'未定義no-undef