我正在尝试从 CMS 创建一组元素。我在这里用一组在 Javascript 中生成的矩形重现了这个问题。我怎样才能为它们中的每一个动态添加一个“onmouseover”方法，改变悬停 block 的颜色？
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}<body id="body">
</body>最佳答案
当您将 hoverCube 作为回调传递给您的事件监听器时，它会自动传递一个包含事件信息的对象 (e)。从这些信息中，您可以通过执行 (e.target) 获取触发事件的元素，然后您可以设置其样式:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(e) {
e.target.style.backgroundColor = "orange";
}.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}<body id="body">
</body>或者，为了实现您在代码中尝试做的事情，您需要将 i 作为参数传递给 hoverCube，然后它就可以访问正确的元素:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", (function(i) { // ES5 closure (if using ES6 you can simply change var i to let i in the for loop)
return function() {
hoverCube(i);
};
})(i)
)}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}<body id="body">
</body>关于javascript - onmouseover方法动态分配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58115428/