2

我有一个容器 div，里面有许多较小的 div，每个都有一个盒子类。容器的样式为网格。我有一个事件侦听器，当发生鼠标悬停事件时，它会更改网格框的背景颜色。

我想制作一种迷幻模式，当鼠标悬停而不是固定颜色时，使框成为随机颜色。

我有一个按钮：

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

它在 JavaScript 中标识：

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

我在按钮的类上有一个切换按钮，可以psychMode active在单击按钮时将其更改为：

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

最后，我有一个函数返回一个随机数和盒子的事件监听器：

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

由于某种原因，该代码仅导致黑色背景和红色边框。即使打开活动类，它也不会选择随机颜色。我还尝试将两个条件放在 for 循环中，它仍然不起作用。有人可以告诉我我做错了什么吗？

4

2 回答 2

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 循环。

使您的代码尽可能简洁，并避免不必要的循环。

于 2021-01-14T13:44:10.307 回答
0

你只分配psychClass一次，所以它总是等于"psychMode".

您最好完全放弃该变量并继续使用Element.classList.contains（有关contains函数的详细信息，请参见此处）

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()})`
        })
    }
}
于 2021-01-14T04:25:53.170 回答