为什么评级总是显示评级的最大值，而隐藏字段则不然

Why is the rating always showing the max amount of rating, when hidden fields dictate otherwise?

本文关键字：字段 隐藏 最大值 显示 为什么      更新时间：2023-09-26

我正试图用JS和jQuery聪明，并使用一个名为'Raty'的3PP，它只是把星星放入div，当你想显示一个项目的评级时很有用。

现在，这是我用来动态赋值的javascript: 
$(document).ready(function() {
for (var i = 1; i <=5; i++) {
    var starting = parseInt($('#toplistRating'+i+'val').val());
    $('#toplistRating'+i).raty({
        number: 3,
        half: true,
        readOnly: true,
        start: starting,
        hintList: ['could be improved', 'alright', 'AWESOME']
    });
}
});

还有一个从DB得到的项目列表。以下是所有5个(注意它们本质上是相同的，除了一些id相差1):

 <div id="toplist" class="std-column">
        <p class="toplist-links">switch to top: <a href="index?toplistSelected=1">1</a> | <a href="index?toplistSelected=2">2</a>
            <a href="index?toplistSelected=3">3</a> | <a href="index?toplistSelected=4">4</a></p>
            <div class="toplist-item">
                <a href="viewpic?id=35">
                <p class="toplist-num">1.</p>
                    <img src="image?id=35&amp;thumbnail=1" class="toplist-pic">
                    <div class="toplist-info">
                        <div id="toplistRating1" style="cursor: default;" title="AWESOME"><img class="toplistRating1" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating1-1">&nbsp;<img class="toplistRating1" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating1-2">&nbsp;<img class="toplistRating1" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating1-3"><input type="hidden" id="toplistRating1-score" name="score" value="3"></div>
                        <input type="hidden" value="6" id="toplistRating1val">
                        <p class="toplist-text"><span class="soft">1 ratings</span></p>
                    </div>
               </a> 
            </div>   
            <div class="toplist-item">
                <a href="viewpic?id=7">
                <p class="toplist-num">2.</p>
                    <img src="image?id=7&amp;thumbnail=1" class="toplist-pic">
                    <div class="toplist-info">
                        <div id="toplistRating2" style="cursor: default;" title="AWESOME"><img class="toplistRating2" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating2-1">&nbsp;<img class="toplistRating2" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating2-2">&nbsp;<img class="toplistRating2" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating2-3"><input type="hidden" id="toplistRating2-score" name="score" value="3"></div>
                        <input type="hidden" value="5" id="toplistRating2val">
                        <p class="toplist-text"><span class="soft">3 ratings</span></p>
                    </div>
               </a> 
            </div>   
            <div class="toplist-item">
                <a href="viewpic?id=11">
                <p class="toplist-num">3.</p>
                    <img src="image?id=11&amp;thumbnail=1" class="toplist-pic">
                    <div class="toplist-info">
                        <div id="toplistRating3" style="cursor: default;" title="AWESOME"><img class="toplistRating3" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating3-1">&nbsp;<img class="toplistRating3" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating3-2">&nbsp;<img class="toplistRating3" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating3-3"><input type="hidden" id="toplistRating3-score" name="score" value="3"></div>
                        <input type="hidden" value="5" id="toplistRating3val">
                        <p class="toplist-text"><span class="soft">5 ratings</span></p>
                    </div>
               </a> 
            </div>   
            <div class="toplist-item">
                <a href="viewpic?id=8">
                <p class="toplist-num">4.</p>
                    <img src="image?id=8&amp;thumbnail=1" class="toplist-pic">
                    <div class="toplist-info">
                        <div id="toplistRating4" style="cursor: default;" title="AWESOME"><img class="toplistRating4" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating4-1">&nbsp;<img class="toplistRating4" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating4-2">&nbsp;<img class="toplistRating4" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating4-3"><input type="hidden" id="toplistRating4-score" name="score" value="3"></div>
                        <input type="hidden" value="4" id="toplistRating4val">
                        <p class="toplist-text"><span class="soft">5 ratings</span></p>
                    </div>
               </a> 
            </div>   
            <div class="toplist-item">
                <a href="viewpic?id=12">
                <p class="toplist-num">5.</p>
                    <img src="image?id=12&amp;thumbnail=1" class="toplist-pic">
                    <div class="toplist-info">
                        <div id="toplistRating5" style="cursor: default;" title="AWESOME"><img class="toplistRating5" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating5-1">&nbsp;<img class="toplistRating5" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating5-2">&nbsp;<img class="toplistRating5" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating5-3"><input type="hidden" id="toplistRating5-score" name="score" value="3"></div>
                        <input type="hidden" value="4" id="toplistRating5val">
                        <p class="toplist-text"><span class="soft">5 ratings</span></p>
                    </div>
               </a> 
            </div>   
    </div>

Raty - http://www.wbotelhos.com/raty/-当我知道分数较低时，每个项目只显示3颗星(满分3颗)，比如最后2颗2星。

请帮帮我。我怀疑我的问题在于可疑的javascript使用，特别是for循环。如果你需要更多的信息，请告诉我，我会修改问题。

start的值来自div中隐藏的输入字段。从示例html中，这些值都大于3。

6、5、5、4。

这些最大值为3，因为这是星形范围。

将隐藏输入字段的值更改为<=3，您应该看到不同的星图。

如果你想包含半星，然后尝试parseFloat而不是parseInt然后/2.0。

相关文章：