Question

我在页面上有四个框，我想在用户点击它们时更改颜色。我给每个盒子一个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>

Codepen：https://codepen.io/simonrevill/pen/WzZReX

Answer 1

您可以使用addEventListener()方法为公共类分配attach事件侦听器。在事件中，侦听器this引用调用事件处理程序的元素

＆＃13;

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)

＆＃13;

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;
}

＆＃13;

<div class="box" id="boxa"></div>
<div class="box" id="boxb"></div>
<div class="box" id="boxc"></div>
<div class="box" id="boxd"></div>

＆＃13;

参考

Answer 2

您可以尝试以下操作：

＆＃13;

function changeColor(element) {
  var col = '#' + Math.floor(Math.random() * 16777215).toString(16);
  element.style.backgroundColor = col;
}

＆＃13;

#boxa {
  width: 100px;
  height: 100px;
  background-color: #fab1a0;
  border-radius: 10px;
  display: inline-block;
}

#boxb {
  width: 100px;
  height: 100px;
  background-color: #00cec9;
  border-radius: 10px;
  display: inline-block;
}

#boxc {
  width: 100px;
  height: 100px;
  background-color: #55efc4;
  border-radius: 10px;
  display: inline-block;
}

#boxd {
  width: 100px;
  height: 100px;
  background-color: #6c5ce7;
  border-radius: 10px;
  display: inline-block;
}

＆＃13;

<div id="boxa" onclick="changeColor(this)"></div>
<div id="boxb" onclick="changeColor(this)"></div>
<div id="boxc" onclick="changeColor(this)"></div>
<div id="boxd" onclick="changeColor(this)"></div>

＆＃13;

Answer 3

要处理click事件委派中的多个divs', you can simplify your code by making use of事件。

只需添加父div [{1}}并为其添加#box即可。当您点击event listener中的任何一个时，该活动将委托给child divs div，您可以使用parent来更改颜色。

event.target

var box = document.getElementById("box");

box.addEventListener("click", function(event) {
  var col = '#'+Math.floor(Math.random()*16777215).toString(16);
  event.target.style.backgroundColor=col;
});

重构JS函数以定位多个ID

3 个答案: