Question

我正在尝试从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>

Answer 1

当您将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>

Answer 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>

Answer 3

您在这里有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>

Onmouseover方法动态分配

3 个答案: