我正在尝试从CMS创建一组元素。我在这里用Javascript中生成的一组矩形重现了问题。如何动态地向其中每个添加“ onmouseover”方法,以更改所徘徊的块的颜色?
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>
答案 0 :(得分:2)
当您将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>
答案 1 :(得分:2)
将事件侦听器附加到所有元素。用querySelectorAll
选择它们。无需id
。
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
document.getElementById("body").appendChild(coloured_div);
}
document.querySelectorAll('.col_div_class').forEach(function(el) {
el.addEventListener('mouseover', function(e) {
e.currentTarget.style.backgroundColor = "orange";
});
});
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body"></body>
答案 2 :(得分:2)
您在这里有2个选项。首先是仅使用CSS来完成任务。
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);
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
.col_div_class:hover {
background-color: orange;
}
<body id="body">
</body>
如果必须使用Javascript,请参见下文。
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", function(e){e.currentTarget.style.backgroundColor = "orange";});
coloured_div.addEventListener("mouseout", function(e){e.currentTarget.style.backgroundColor = "yellow";});
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>