javascript - 单击和鼠标悬停时更改 div 背景

Question

我正在尝试使用 JS 在鼠标悬停和单击时更改 div 中的图片。像那样:

    var favs = document.getElementsByClassName("fav-wrapper");
    for (var i = 0; i < favs.length; i++) {
    favs[i].innerHTML = '<img src="images/favorite.png" />';
    favs[i].onMouseOver = function () {
        favs[i].innerHTML = "<img src='images/favorite_hover.png' />";
    }
    favs[i].onClick = function () {
        favs[i].innerHTML = "<img src='images/favorite_on.png' />";
    };
}

但由于某种原因，它不会工作。我做错了什么？

Answer 1

尝试小写事件处理程序，实际上您需要一个闭包才能让 [i] 在循环内工作。我更喜欢在你的情况下使用 this 。

var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
  favs[i].innerHTML = '<img src="images/favorite.png" />';
  favs[i].onmouseover = function () {
    this.innerHTML = "<img src='images/favorite_hover.png' />";
  }
  favs[i].onclick = function () {
    this.innerHTML = "<img src='images/favorite_on.png' />";
  }
}

但为什么不直接更改图像的 src 呢？

var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
  var fav=favs[i];
  fav.getElementsByTagName("img")[0].src="images/favorite.png";
  fav.onmouseover = function () {
    this.getElementsByTagName("img")[0].src="images/favorite_hover.png";
  }
  fav.onmouseout = function () {
    this.getElementsByTagName("img")[0].src="images/favorite.png";
  }
  fav.onclick = function () {
    this.getElementsByTagName("img")[0].src="images/favorite_on.png";
  }
}

顺便说一句，你可以用 CSS 完成所有这些