javascript di cambiare dinamicamente l'immagine src

Question

Sto scrivendo un codice molto semplice per modificare dinamicamente immagine al passaggio del mouse src/mouseout:

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

L'idea è abbastanza semplice: utilizzare una serie di immagini per simulare la barra di voto . E quando un'immagine è coperta dal puntatore del mouse, dovrebbe cambiare colore (ben idealmente includendo tutte le immagini precedenti dovrebbe cambiare colore ma mi sono bloccato prima di arrivarci). La mia domanda è quando passo il mouse su qualsiasi immagine, solo l'ultima immagine cambia colore ('valutazione5'). Sembra che quando == 5 il suo listener di eventi abbia sovrascritto tutti gli altri eventlistener (i = 1,2,3,4)?

Answer 1

Poiché javascript non ha b lock scope ma scope della funzione, il img all'interno delle funzioni listener anonime farà riferimento all'ultimo valore.
Si potrebbe risolvere questo semplicemente racchiude gli ascoltatori ad una chiusura privata come

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

Per una migliore comprensione circa le chiusure leggere this

Answer 2

modo più semplice per delegare evento ... In tal modo non è necessario aggiungere ascoltatori per elemento

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 è possibile aggiungere oggetti da qualsiasi oggetto in fase di esecuzione. Utilizzando questo comportamento si può fare qualcosa di simile ...

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

Si potrebbe semplicemente aggiungere i vostri ascoltatori in una funzione personalizzata:

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

Poi:

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

Demo