的JavaScript動態改變圖片src

我正在寫一些非常簡單的代碼來動態改變鼠標懸停/鼠標移開圖片src：的JavaScript動態改變圖片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（我= 1,2,3,4）？委託事件......以這樣的方式

來源

2013-07-09 Yandong Liu

'匿名偵聽器函數內img'指' （包含最後一個賦值：'rating5'）。嘗試用'changeimg_color（this.id）'替換'changeimg_color（img）;'或者只傳遞'this'（圖像產生鼠標事件）到'change *'函數省略'e（）'wrappe河 – jensgram

由於JavaScript沒有b鎖定範圍但功能範圍內，匿名偵聽器函數中的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

爲了更好地理解有關關閉讀this

來源

2013-07-09 08:05:48

這完全解決了我的問題。謝謝！ –

最簡單的方法，你就不需要每個元素

Live Demo

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(); 
}

來源

2013-07-09 07:39:36 Givi

添加監聽器在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); 
    }); 
}

來源

2013-07-09 07:39:43 mohkhan

你可以簡單地在一個自定義函數添加你的聽衆：

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); 
}

Demo

來源

2013-07-09 07:45:11 sp00m

的JavaScript動態改變圖片src

回答

相關問題