我在页面上有四个框,我想在用户单击它们时更改颜色。我给每个盒子一个 id:
<div id="boxa" onclick="changeColorA()"></div>
<div id="boxb" onclick="changeColorB()"></div>
<div id="boxc" onclick="changeColorC()"></div>
<div id="boxd" onclick="changeColorD()"></div>
如您所见,为了使用 onclick 更改框颜色,我必须为每个框编写一个单独的函数:
function changeColorA() {
var col = '#'+Math.floor(Math.random()*16777215).toString(16);
document.getElementById("boxa").style.backgroundColor=col;
}
function changeColorB() {
var col = '#'+Math.floor(Math.random()*16777215).toString(16);
document.getElementById("boxb").style.backgroundColor=col;
}
function changeColorC() {
var col = '#'+Math.floor(Math.random()*16777215).toString(16);
document.getElementById("boxc").style.backgroundColor=col;
}
function changeColorD() {
var col = '#'+Math.floor(Math.random()*16777215).toString(16);
document.getElementById("boxd").style.backgroundColor=col;
}
我在 iPad 上的浏览器中运行了它,但运行速度太慢。我如何重构它,以便我只有一个函数可以针对用户点击的任何框?
function changeColorA() {
var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.getElementById("boxa").style.backgroundColor = col;
}
function changeColorB() {
var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.getElementById("boxb").style.backgroundColor = col;
}
function changeColorC() {
var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.getElementById("boxc").style.backgroundColor = col;
}
function changeColorD() {
var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.getElementById("boxd").style.backgroundColor = col;
}
body {
margin: 10px;
width: 758px;
height: 1014px;
}
#main {
background-color: #00b894;
width: 748px;
height: 1004px;
}
.container-1 {
text-align: center;
}
.container-2 {
text-align: center;
}
#boxa {
margin-top: 250px;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: #fab1a0;
border-radius: 20px;
display: inline-block;
}
#boxb {
width: 200px;
height: 200px;
background-color: #00cec9;
border-radius: 20px;
display: inline-block;
}
#boxc {
margin-top: 20px;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: #55efc4;
border-radius: 20px;
display: inline-block;
}
#boxd {
width: 200px;
height: 200px;
background-color: #6c5ce7;
border-radius: 20px;
display: inline-block;
}
<div id="boxa" onclick="changeColorA()"></div>
<div id="boxb" onclick="changeColorB()"></div>
<div id="boxc" onclick="changeColorC()"></div>
<div id="boxd" onclick="changeColorD()"></div>
最佳答案
您可以使用 addEventListener()
方法为附加事件监听器分配一个公共(public)类。在事件监听器中 this
指的是调用事件处理程序的元素
function changeColor() {
var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
this.style.backgroundColor = col;
}
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++)
boxes[i].addEventListener('click', changeColor)
body {
margin: 10px;
width: 758px;
height: 1014px;
}
#main {
background-color: #00b894;
width: 748px;
height: 1004px;
}
.container-1 {
text-align: center;
}
.container-2 {
text-align: center;
}
#boxa {
margin-top: 250px;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: #fab1a0;
border-radius: 20px;
display: inline-block;
}
#boxb {
width: 200px;
height: 200px;
background-color: #00cec9;
border-radius: 20px;
display: inline-block;
}
#boxc {
margin-top: 20px;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: #55efc4;
border-radius: 20px;
display: inline-block;
}
#boxd {
width: 200px;
height: 200px;
background-color: #6c5ce7;
border-radius: 20px;
display: inline-block;
}
<div class="box" id="boxa"></div>
<div class="box" id="boxb"></div>
<div class="box" id="boxc"></div>
<div class="box" id="boxd"></div>
引用文献
关于javascript - 重构 JS 函数以定位多个 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49490303/