如何显示基于平均值的星级评分？

Question

我目前正在使用 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。我期待着你能帮助我。

Answer 1

你所有的星星都有相同的一组 ID，所以它只会命中它遇到的第一个。 ID 应该是唯一的。您可以通过包含 django 的 forloop.counter 使它们独一无二。 ID 不应该以数字开头，所以我也会更改它。

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

如何显示基于平均值的星级评分？

How can I show a star rating based on the average?

html

javascript

django

jquery

rating-system