Javascript dynamisch Bild src ändern

Question

ich einige sehr einfachen Code ich schreibe dynamisch Bild src mit der Maus darüber/mouseout zu ändern:

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

Die Idee ist ziemlich einfach: eine Reihe von Bildern verwenden, um den Bewertungsbalken zu simulieren . Und wenn ein Bild mit dem Mauszeiger bedeckt ist, sollte es die Farbe ändern (im Idealfall einschließlich aller vorherigen Bilder sollte die Farbe wechseln, aber ich blieb stecken, bevor ich dorthin kam). Meine Frage ist, wenn ich auf irgendein Bild schwebe, ändert nur das letzte Bild die Farbe ('rating5'). Sieht aus, wenn i == 5 sein Eventlistener hat alle anderen Eventlistener überschrieben (i = 1,2,3,4)?

Answer 1

Da Javascript nicht b Sperrbereich aber Funktionsumfang, die img innerhalb der anonymen Listener-Funktionen beziehen sich auf den letzten Wert.
Sie könnten dieses Problem lösen, indem Sie einfach umschließt die Zuhörer zu einem privaten Schließung wie

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

Zum besseren Verständnis über Schließungen bezieht sich auf die this

Answer 2

Der einfachste Weg Ereignis zu delegieren ... In einer solchen Art und Weise Sie nicht brauchen, Hörer pro

Element hinzufügen

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

Answer 3

In JS Sie Eigenschaften auf jedes Objekt zur Laufzeit hinzufügen. Mit diesem Verhalten, das Sie so etwas tun kann ...

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

Sie einfach Ihre Zuhörer in einer benutzerdefinierten Funktion hinzufügen könnte:

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

Dann:

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

Demo