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>
<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
に渡しますか?子要素の順序を仮定し
ああ男を使用することができ、あなたが必要とするものであり、絶対伝説、ありがとう! – SK2017
申し訳ありません実際の値を取得するのを忘れました:)それを修正しました。 – inarilo