私は、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(1によって異なっているいくつかのIDをバー、彼らは本質的に同じであることに注意してください)、次のとおりです。
<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&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"> <img class="toplistRating1" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating1-2"> <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&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"> <img class="toplistRating2" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating2-2"> <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&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"> <img class="toplistRating3" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating3-2"> <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&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"> <img class="toplistRating4" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating4-2"> <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&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"> <img class="toplistRating5" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating5-2"> <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つの星のように低くなります。
私を助けてください。私は私の問題は、特にforループのjavascriptの疑わしい使用にあると思う。もっと情報が必要な場合は私に知らせてください。質問を修正します。
各アイテムの開始値の値を確認しましたか?これが常に3なら、それはあなたの問題かもしれません。 – Fermin
** REALここでの問題は何ですか?** ** A **無効な格付けディスプレイ(私は質問のタイトルを理解して)(私は質問から理解される)または** B ** jQueryのセレクタが動作していませんか?それが最初のものなら、あなたの質問のタイトルを変更する必要があります。 –
@Robert、私が最後に見たHTMLはありませんでした!彼の問題だと思われる。常に3〜4の間になります。 – Fermin