Skip to main content
se añadieron 387 caracteres en el cuerpo
Origen Enlace
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.classNamegetAttribute('data-value');

  for(var i = 'star0; inclinada';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';"star";
  }
}

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

el jsfiddlejsfiddle

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) {
    event.target.className = 'star inclinada';
}

function desinclinar(event) {
    event.target.className = 'star';
}

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

el jsfiddle

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

Origen Enlace
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) {
    event.target.className = 'star inclinada';
}

function desinclinar(event) {
    event.target.className = 'star';
}

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

el jsfiddle