javascript - JavaScript 事件侦听器不适用于 if 语句
问题描述
我有一个容器 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 循环中,它仍然不起作用。有人可以告诉我我做错了什么吗?
解决方案
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 循环。
使您的代码尽可能简洁,并避免不必要的循环。
推荐阅读
- c# - C# 从泛型获取 Linq 表
- ruby-on-rails - 如何为应该在 Pundit 授权机制后面失败的请求编写请求 RSpec?
- angular - Div 元素上的 ngModel
- ada - 子包隐藏另一个子包的包
- python - 在 QGIS 3.4 Python 控制台中使用字段计算器
- python - 具有加州住房数据的神经网络
- wso2 - WSO2 Enterprise Integrator Sequence - 异步调用后的轮询结果
- sql - 根据其中的行和其他表更新表
- beeline - 错误:编译语句时出错:FAILED: SemanticException Error when getting current notification event ID (state=42000,code=40000)
- typescript - Atom 编辑器关闭 TypeScript 的相同术语突出显示