Skip to main content
2 de 2
se añadieron 387 caracteres en el cuerpo
Mauro Petrini
  • 1.8k
  • 11
  • 17

el problema es que estas recorriendo todas las estrellas y le estas aplicando la clase inclinada o lo mismo cuando quita el mouse.

podes acceder al target, en este caso los li, donde aplicas los eventos de la siguiente manera

var estrella = document.getElementsByClassName("star");

function inclinar(event) {

  var dataValue = event.target.getAttribute('data-value');

  for(var i = 0; i < estrella.length; i++) {
    if(estrella[i].getAttribute('data-value') <= dataValue)
      estrella[i].className += " inclinada";
  }
}

function desinclinar(event) {
  var dataValue = event.target.getAttribute('data-value');

  for(var i = 0; i < estrella.length; i++) {
    if(estrella[i].getAttribute('data-value') > dataValue)
      estrella[i].className = "star";
  }
}

for(var i = 0; i < estrella.length; i++) {
    estrella[i].addEventListener('mouseenter', inclinar);
    estrella[i].addEventListener('mouseleave', desinclinar);
}

el jsfiddle

Mauro Petrini
  • 1.8k
  • 11
  • 17