Как я могу показать звездный рейтинг на основе среднего значения?

Я сейчас работаю с Django и Jquery, мне нужно показать несколько отелей с оценкой звезд оранжевым цветом на основе среднего значения, полученного из оценки и количества людей, которые проголосовали за этот отель. Приведу пример

score = 8
vote= 2
overage = 4

Таким образом, мне нужно отобразить 4 оранжевые звезды и 1 черную. У меня есть этот код, но он работает только для первого отеля, а их много, поэтому я использую 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%}

Я не знаю много Js. Я с нетерпением жду, когда вы сможете вылечить меня, пожалуйста.

Все ваши звезды имеют одинаковый набор идентификаторов, поэтому он бьет только первую попавшуюся. Идентификаторы должны быть уникальными. Вы можете сделать их уникальными, включив в django's forloop.counter. Идентификаторы не должны начинаться с цифр, поэтому я изменю и это.

<span class="fa fa-star" id="star_{{forloop.counter}}_1" ></span>
<span class="fa fa-star" id="star_{{forloop.counter}}_2" ></span>

Тогда вы можете подстроить свою функцию

            $(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'
                }
            });


const rating = stars => '★★★★★☆☆☆☆☆'.slice(5 - stars, 10 - stars);

document.write(rating(1));
document.write('<br>');
document.write(rating(2));
document.write('<br>');
document.write(rating(3));
document.write('<br>');
document.write(rating(4));
document.write('<br>');
document.write(rating(5));
body {
  font-size: 65px;
}

Помогает в проектировании звезд.

Вернуться на верх