2011-08-16 5 views
0

私は、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&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つの星のように低くなります。

私を助けてください。私は私の問題は、特にforループのjavascriptの疑わしい使用にあると思う。もっと情報が必要な場合は私に知らせてください。質問を修正します。

+0

各アイテムの開始値の値を確認しましたか?これが常に3なら、それはあなたの問題かもしれません。 – Fermin

+0

** REALここでの問題は何ですか?** ** A **無効な格付けディスプレイ(私は質問のタイトルを理解して)(私は質問から理解される)または** B ** jQueryのセレクタが動作していませんか?それが最初のものなら、あなたの質問のタイトルを変更する必要があります。 –

+0

@Robert、私が最後に見たHTMLはありませんでした!彼の問題だと思われる。常に3〜4の間になります。 – Fermin

答えて

4

開始の値はdivの非表示の入力フィールドから得られます。サンプルHTMLから、これらの値はすべて3より大きい。

上記の4つの項目について6,5,5,4。

これはスターの範囲であるため、これらは3で最大になります。

非表示の入力フィールドの値を< = 3に変更すると、異なるスター画像が表示されます。

半分の星を含めたい場合は、その後parseIntではなくparseFloatを実行してから/ 2.0を実行してください。

+1

+1 2で割ると、恐らく彼は忘れてしまったものです。 –

+0

ありがとう、それはまさに私が忘れたものです! –

関連する問題