動態更改圖像src的javascript

Question

我正在編寫一些非常簡單的代碼來在mouseover / mouseout上動態更改圖像src：

   function e(id) {
     return document.getElementById(id);
   }

   function changeimg_bw(ele) {
      e(ele).src='rating_bw.png';
   }

   function changeimg_color(ele) 
      e(ele).src='rating_color.png';
   }

   for(var i=1;i<=5;i++) {
     var img ='rating'+i;
     e(img).addEventListener('mouseover', function(event) {
          changeimg_color(img);
     });
     e(img).addEventListener('mouseout', function(event) {
          changeimg_bw(img);
     });
   }

這個想法很簡單：使用一組圖像來模擬評級欄。 當一些圖像被鼠標指針覆蓋時，它應該改變顏色（理想情況下包括所有以前的圖像應該改變顏色但是在到達之前我被卡住了）。 我的問題是，當我將鼠標懸停在任何圖像上時，只有最后一張圖像會改變顏色（'rating5'）。 看起來當我= = 5時，它的eventlistener覆蓋了所有其他eventlistener（i = 1,2,3,4）？

Answer 1

委派事件的最簡單方法......以這種方式，您不需要為每個元素添加偵聽器

現場演示

var parent = document.getElementById("rating1").parentNode;

parent.addEventListener("mouseover", changeimg_color, false);
parent.addEventListener("mouseout", changeimg_bw, false);

function changeimg_bw(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        e.target.src='rating_bw.png';
    }
    e.stopPropagation();
    e.preventDefault();
}

function changeimg_color(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        e.target.src='rating_color.png';
    }
    e.stopPropagation();
    e.preventDefault();
}

Answer 2

由於javascript沒有塊范圍而是函數范圍，因此匿名偵聽器函數中的img將引用最后一個值。
您可以通過簡單地將偵聽器封裝到私有閉包中來解決此問題

for (var i = 1; i <= 5; i++) {
    var img = 'rating' + i;
    (function (img) {
        e(img).addEventListener('mouseover', function (event) {
            changeimg_color(img);
        });
        e(img).addEventListener('mouseout', function (event) {
            changeimg_bw(img);
        });
    })(img);
}

DEMO

為了更好地理解閉包，請閱讀此內容

Answer 3

在JS中，您可以在運行時向任何對象添加屬性。 使用這種行為你可以做這樣的事......

for(var i=1;i<=5;i++) {
    var img ='rating'+i;
    e(img).index = i;
    e(img).addEventListener('mouseover', function(event) {
        changeimg_color("rating" + event.target.index);
    });
    e(img).addEventListener('mouseout', function(event) {
        changeimg_bw("rating" + event.target.index);
    });
}

Answer 4

您只需在自定義函數中添加偵聽器：

function addImgListeners(img) {
    e(img).addEventListener('mouseover', function(event) {
        changeimg_color(img);
    });
    e(img).addEventListener('mouseout', function(event) {
        changeimg_bw(img);
    });
}

然后：

for(var i=1; i<=5; i++) {
    var img = "rating" + i;
    addImgListeners(img);
    // or even addImgListeners("rating" + i);
}

演示