我如何根据平均值显示星级评级？

发布于 2025-01-30 02:38:46 字数 1678 浏览 3 评论 0原文

我目前正在使用 django 和 jQuery ，我需要根据从分数获得的平均值和数字< /strong>投票给那家酒店的人。我举一个例子

score = 8
vote= 2
overage = 4

，因此我需要展示4个橙色星星和1个黑色。我有这个代码，但它仅适用于第一家酒店，有很多，所以我使用的是。

      {% 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。我期待您可以治愈我。

原文

I am currently working with Django and Jquery, I need to show some hotels with the stars rated in orange based on the average obtained from a score and the number of people who have voted for that hotel.
I'll give an example

score = 8
vote= 2
overage = 4

Therefore I need to display 4 orange stars and 1 black. I have this code, but it only works for the first hotel and there are many, so I use 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%}

I don't know much Js. I'm looking forward you can healp me please.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱没勇气 2025-02-06 02:38:46

您所有的星星都具有相同的ID集，因此仅击中它的第一个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'
                }
            });

All your stars have the same set of IDs so it's only hitting the first it encounters. IDs should be unique. You can make them unique by including django's forloop.counter. IDs should not start with numbers so I'll change that too.

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

Then you can tweak your function

            $(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 原文

岁月无声 2025-02-06 02:38:46

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

它有助于制作恒星设计。

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