Actualmente estoy trabajando con Django y Jquery , necesito mostrar algunos hoteles con las estrellas calificadas en naranja en base al promedio obtenido de un puntaje y la cantidad de personas que han votado por ese hotel. daré un ejemplo
score = 8 vote= 2 overage = 4Por lo tanto, necesito mostrar 4 estrellas naranjas y 1 negra. Tengo este código, pero solo funciona para el primer hotel y hay muchos, así que uso un for.
{% for hotel in hotels %} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/> <div class="col-12" > <span class="fa fa-star" id="1star" ></span> <span class="fa fa-star" id="2star" ></span> <span class="fa fa-star" id="3star" ></span> <span class="fa fa-star" id="4star" ></span> <span class="fa fa-star" id="5star" ></span> </div> <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script> <script type="text/javascript"> $(document).ready(function () { let score = '{{hotel.score}}' let vote = '{{hotel.vote}}' let overage = (parseInt(score)/ parseInt(vote)) let star = document.getElementById('star') for(let i = 0; i < overage; i++) { document.getElementById((i+1)+'star').style.color='orange' } }); </script> {% endfor%}No sé mucho Js. Espero que me puedas curar por favor.
Todas sus estrellas tienen el mismo conjunto de ID, por lo que solo golpea a la primera que encuentra. Las identificaciones deben ser únicas. Puede hacerlos únicos incluyendo forloop.counter de django. Las identificaciones no deben comenzar con números, así que también cambiaré eso.
<span class="fa fa-star" id="star_{{forloop.counter}}_1" ></span> <span class="fa fa-star" id="star_{{forloop.counter}}_2" ></span>Entonces puedes modificar tu función
$(document).ready(function () { let score = '{{hotel.score}}' let vote = '{{hotel.vote}}' let overage = (parseInt(score)/ parseInt(vote)) let star = document.getElementById('star') for(let i = 0; i < overage; i++) { document.getElementById("star_{{forloop.counter}}_" + (i+1) ).style.color='orange' } });