2017-05-14 10 views
0

jquery.barRating.jsを使用して、各div要素の評価をマイページに表示しています。メソッドオプションに値を渡すより効率的な方法

すべてのdivに次のHTMLをレンダリングする必要があります。現在4つがレンダリングされています。

<div class="star-ratings"> 
       <p>Rate This Video</p> 
       <div class="stars stars-example-fontawesome-o"> 
       <select class="example-fontawesome-o" name="rating" data-current-rating="" autocomplete="off"> 
        <option value=""></option> 
        <option value="1">1</option> 
        .......... 
       </select> 
       <span class="title current-rating"> 
        Current rating: <span class="value">5</span> 
       </span> 
       <span class="title your-rating hidden"> 
        Your rating: <span class="value"></span>&nbsp; 
        <a href="#" class="clear-rating"><i class="fa fa-times-circle"></i></a> 
       </span> 
       </div> 
      </div> 

各レーティングを選択オプションinitialRatingをとり、次のスクリプトによって開始される - これは10の外に、強調表示されますどのように多くの星スクリプトに指示します。

<span class="title current-rating"> 
         Current rating: <span class="value">5</span> 
        </span> 

しかし、現時点では、私はまた、オプションに渡すためにレンダリングする必要があり評価の配列を渡すために持っています -

var arrOfRatings = [5,4,6,7]; 

$('.example-fontawesome-o').each(function (i, obj) { // Each instance of .example-fontawesome-o 

    $(obj).barrating({ 
     theme: 'fontawesome-stars-o', 
     showSelectedRating: false, 
     initialRating: parseFloat(arrOfRatings[i]), // Array set up earlier with ratings in 
     onSelect: function (value, text) { 

      var starRatingSelector = $(this)[0].$elem.parent().parent(); // div.stars.stars-example-fontawesome-o 
      var starRatingChildCurrentRating = starRatingSelector.children('.current-rating'); // .stars.stars-example-fontawesome-o span.title.current-rating.hidden 
      var starRatingChildYourRating = starRatingSelector.children('.your-rating'); // .stars.stars-example-fontawesome-o span.title.your-rating.hidden 


      if (!value) { 
       obj.barrating('clear'); // Clear rating if there was a problem 
      } else { 

       starRatingChildCurrentRating.addClass('hidden'); 


       starRatingChildYourRating.removeClass('hidden') 
         .find('span') 
         .html(value); 
      } 

     }, 
     onClear: function (value, text) { 
      console.log($(this)); 
      var clearSelector = $(this)[0].$elem.parent().parent(); 


      clearSelector.children('.current-rating') 
        .removeClass('hidden') 
        .end() 
        .find('.your-rating') 
        .addClass('hidden'); 
     } 
    }); 


}); 

の評価は、上記のhtmlです。スクリプトが取得する方法があるかどうか、私は疑問に思いクリア要約するので、次の

$(obj).barrating({ 
     theme: 'fontawesome-stars-o', 
     showSelectedRating: false, 
     initialRating: parseFloat(arrOfRatings[i]), 
     onSelect: function (value, text) { // Can only access $(this) here} 

過ぎて取得するまで、私はアクセス$(this)をカントとして、このようにそれを行うには持っていたinitialRating: parseFloat(arrOfRatings[i])

値5を<span class="value">5</span>の範囲外にして、追加の配列を使わずにinitialRatingに渡しますか?子要素の順序を仮定し

答えて

1

は、あなたの配列の順序と一致し、クラスcurrent-rating持つ唯一の要素は、あなたが

initialRating: parseFloat($('.current-rating').eq(i).find('.value').text()), 

https://api.jquery.com/eq/

+0

ああ男を使用することができ、あなたが必要とするものであり、絶対伝説、ありがとう! – SK2017

+0

申し訳ありません実際の値を取得するのを忘れました:)それを修正しました。 – inarilo

関連する問題