JavaScript 事件偵聽器不使用 if 語句

Question

我有一個容器 div，里面有許多較小的 div，每個都有一個 class 的盒子。 容器的樣式為網格。 我有一個事件偵聽器，當出現鼠標懸停事件時，它會更改網格框的背景顏色。

我想制作一種迷幻模式，當鼠標懸停在上面而不是固定顏色時，使盒子成為隨機顏色。

我有一個按鈕：

 <button class="psychMode">Psychedelic Mode</button>

在 JavaScript 中標識：

let psych = document.querySelector('.psychMode');
let psychClass = psych.getAttribute('class');

我在按鈕的 class 上有一個切換按鈕，可以在單擊按鈕時將其更改為psychMode active狀態：

psych.addEventListener('click', function () {
    psych.classList.toggle('active');
})

最后，我有一個 function 返回一個隨機數和盒子的事件監聽器：

function randomColor() {
    let num= Math.floor(Math.random() * 255);
    return num;
}

let boxes = document.querySelectorAll('.box')

for (let i of boxes) {
    i.addEventListener('mouseover', () => {
        i.style['backgroundColor'] = 'black'
        i.style.border = '1px solid red'
    })
}

for (let i of boxes) {
    if (psychClass === 'active') {
        i.addEventListener('mouseover', () => {
            i.style['backgroundColor'] = `rgb(${randomColor()},${randomColor()},${randomColor()})`
            i.style.border = `1px solid rgb(${randomColor()},${randomColor()},${randomColor()})`
        })
    }
}

出於某種原因，該代碼只會導致黑色背景和紅色邊框。 即使打開活動 class，它也不會選擇隨機顏色。 我也試過將兩個條件放在一起 for 循環，它仍然沒有用。 有人可以告訴我我做錯了什么嗎？

Answer 1

for (let i of boxes) {
    i.addEventListener('mouseover', () => {
        if(!psych.classList.contains("active"){
          i.style.backgroundColor = 'black'
          i.style.border = '1px solid red'
        }else{
          i.style.backgroundColor = `rgb(${randomColor()},${randomColor()},${randomColor()})`
          i.style.border = `1px solid rgb(${randomColor()},${randomColor()},${randomColor()})`
        }
    })
}

使用它而不是那些 2 for 循環。

使您的代碼盡可能簡潔並避免不必要的循環。

Answer 2

您只分配一次psychClass ，因此它始終等於"psychMode" 。

您最好完全放棄該變量並使用Element.classList.contains （有關contains function 的詳細信息， 請參見此處）

function randomColor() {
    let num= Math.floor(Math.random() * 255);
    return num;
}

let boxes = document.querySelectorAll('.box')

for (let i of boxes) {
    i.addEventListener('mouseover', () => {
        i.style['backgroundColor'] = 'black'
        i.style.border = '1px solid red'
    })
}

for (let i of boxes) {
    if (psych.classList.contains('active')) {
        i.addEventListener('mouseover', () => {
            i.style['backgroundColor'] = `rgb(${randomColor()},${randomColor()},${randomColor()})`
            i.style.border = `1px solid rgb(${randomColor()},${randomColor()},${randomColor()})`
        })
    }
}