如何在数组中单击按钮时执行函数？

Question

我在图表上放置了一个非常大的256个按钮阵列（例如它只是5个）。 我已经在其中创建了一个带有事件监听器的forEach语句，但它没有按照我的意愿去做。 我希望我点击的按钮变黑简单，但我已经尝试设置console.log来测试我的功能，每次点击一个按钮就会记录256次。 我希望按钮只对我在数组中单击的按钮执行操作。

 let cells = document.querySelectorAll(".grid"); cells.forEach(() => { addEventListener("click", function(){ target.style.backgroundColor = "black"; }); });

 body { margin:0; } #background { position:absolute; height:800px; width:800px; background-color:grey; top:100px; left:550px; display:grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); } .grid { display:block; height:50px; width:50px; } .grid:hover { background-color:lightgrey; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>FindMyKeys</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="background"> <div id="grid1" class="grid"></div> <div id="grid2" class="grid"></div> <div id="grid3" class="grid"></div> <div id="grid4" class="grid"></div> <div id="grid5" class="grid"></div> </div> <script src="app.js"></script> </body> </html>

Answer 1

为什么每个人都忽略JS事件委托？!! （我已更改用于代码段使用的css值）

 document.querySelector("#background").onclick = function (e) { if (e.target.className !== 'grid') return; e.stopPropagation(); e.target.style.backgroundColor = "black"; }

 body { margin: 0; } #background { position: absolute; height: 100px; width: 400px; background-color: grey; top: 100px; left: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); } .grid { display: block; height: 50px; width: 50px; } #background div { background-color: pink; } .grid:hover { background-color: lightgrey; }

 <div id="background"> <div id="grid1" class="grid"></div> <div id="grid2" class="grid"></div> <div id="grid3" class="grid"></div> <div id="grid4" class="grid"></div> <div id="grid5" class="grid"></div> </div>

Answer 2

只需改变你的forEach ：

cells.forEach((cell) => {
    cell.addEventListener("click", function(event){
        event.target.style.backgroundColor = "black";
    });
});

如果您的单元格始终位于元素内部，则可以使用事件冒泡功能：

document.getElementById("background").addEventListener("click", function(event) {
    if (event.target.className == "grid") {
        event.target.style.backgroundColor = "black";
    }
});

如何在数组中单击按钮时执行函数？

问题描述

2 个解决方案

解决方案1
2 2019-03-31 01:30:19

解决方案2
1 已采纳 2019-03-31 01:12:30

如何在数组中单击按钮时执行函数？

问题描述

2 个解决方案

解决方案1 2 2019-03-31 01:30:19

解决方案2 1 已采纳 2019-03-31 01:12:30

解决方案1
2 2019-03-31 01:30:19

解决方案2
1 已采纳 2019-03-31 01:12:30