django 如何根据平均值显示星星？

xvw2m8pv 于 2022-11-26 发布在 Go

关注(0)|答案(2)|浏览(157)

我目前正在使用Django和Jquery，我需要显示一些星级为橙子的酒店，这是基于平均得分和投票给该酒店的人数。我将给予一个例子

score = 8
vote= 2
overage = 4

因此我需要显示4个橙子的星星和1个黑色的。我有这个代码，但它只适用于第一家酒店，而且有很多，所以我使用a 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%}

我知道的不多。我期待着你能治疗我。

django

来源：https://stackoverflow.com/questions/72282228/how-can-i-show-a-star-rating-based-on-the-average

2条答案

按热度按时间

mbskvtky1#

你所有的星星都有相同的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'
                }
            });

赞(0）回复(0）举报 2022-11-26

ryevplcw2#

第一个
它有助于使星星设计。

赞(0）回复(0）举报 2022-11-26