Tengo un problema con la animación de estrellas en mi cartera. No cambia el color. No sé por qué sucedió esto, porque antes funcionaba bien.
$(".star").on('click', function() { document.getElementById("stars").value = this.id; for (let i = 0; i <= this.id; i++) { document.getElementById(this.id - i).style.color = "goldenrod"; } }); .d-inline { display:inline } .star { cursor: pointer; font-size: 24px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="ratingDiv"> <div class="star d-inline" id="0">*<i class="fas fa-star stars"></i></div> <div class="star d-inline" id="1">*<i class="fas fa-star stars"></i></div> <div class="star d-inline" id="2">*<i class="fas fa-star stars"></i></div> <div class="star d-inline" id="3">*<i class="fas fa-star stars"></i></div> <div class="star d-inline" id="4">*<i class="fas fa-star stars"></i></div> </div> <br> <input type="text" id="stars" value="" name="stars" hidden> </p>Esto debería funcionar:
$(".star").on('click', function(){ for(let i=0; i<= 4;i++){ document.getElementById(i).querySelector('.fa-star').style.color = ""; } for(let i=0; i<= this.id;i++){ document.getElementById(i).querySelector('.fa-star').style.color = "goldenrod"; } });está cambiando el color de su elemento div pero la estrella está presente en el elemento dentro del div, cambie la línea dentro del ciclo con esto.
document.getElementById(this.id-i).querySelector('.fa-star').style.color = "goldenrod";puede usar este método y hacer clic y pasar el mouse
HTML:
<p> <p class="username" style="color: #F2AC57;"><%= language.__('Ocena') %></p> <div id="ratingDiv"> <div class="star d-inline" id="0"><i class="fas fa-star stars"></i></div> <div class="star d-inline" id="1"><i class="fas fa-star stars"></i></div> <div class="star d-inline" id="2"><i class="fas fa-star stars"></i></div> <div class="star d-inline" id="3"><i class="fas fa-star stars"></i></div> <div class="star d-inline" id="4"><i class="fas fa-star stars"></i></div> </div> <br> <input type="hidden" id="stars" value="" name="stars" autocomplete="off" /> </p>JS:
$(document).ready(function () { $(".star").on('click', function(){ if($("#stars").val().length < 1){ var id = $(this).attr('id'); for(let i = 0; i <= id; i++){ $('#'+i+' .stars').css({color:"goldenrod"}); } $("#stars").val(id); } }).on("mouseover", function(){ if($("#stars").val().length < 1){ $('.stars').css({color:"black"}); var id = $(this).attr('id'); for(let i = 0; i <= id; i++){ $('#'+i+' .stars').css({color:"goldenrod"}); } } }).on("mouseout", function(){ if($("#stars").val().length < 1){ $('.stars').css({color:"black"}); } }); });