我目前正在使用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了解不多。我期待著你能治愈我。
uj5u.com熱心網友回復：
你所有的星星都有相同的 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'
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476886.html
標籤：javascript html jQuery django 评分系统
上一篇：如何在JavaScript和Vue中洗掉重復的陣列元素
下一篇：基本運算子