javascript dynamicznie zmienić obraz src

Question

piszę jakiś bardzo prosty kod dynamicznie zmieniać obraz na mouseover src/odsunięciu myszy:

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

Idea jest dość prosta: wykorzystać tablicę obrazów do symulacji pasek znamionową . A gdy jakiś obraz jest pokryty wskaźnikiem myszy, powinien zmienić kolor (najlepiej jeśli wszystkie poprzednie obrazy powinny zmienić kolor, ale utknąłem zanim się tam dostanę). Moje pytanie brzmi, gdy najeżdżam na dowolny obraz, tylko ostatni obraz zmienia kolor ("rating5"). Wygląda, gdy i == 5 jego eventlistener nadpisał wszystkie inne eventlistener (i = 1,2,3,4)?

Answer 1

Ponieważ javascript nie ma b zakres blokady, ale zakres funkcji, img w ramach funkcji anonimowego odsłuchiwania będzie odnosić się do ostatniej wartości.
Można rozwiązać ten problem, po prostu zamyka słuchaczy do prywatnej zamknięcia jak

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

Dla lepszego zrozumienia o Zamknięcia odczytu this

Answer 2

Najłatwiej przekazać zdarzenia ... W ten sposób nie trzeba dodać słuchaczy na element

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

w JS można dodać właściwości do dowolnego obiektu w czasie wykonywania. Korzystanie z tego zachowania można zrobić coś takiego ...

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

Mogłeś po prostu dodaj swój słuchaczy w funkcji niestandardowej:

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

wówczas:

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

Demo