1

スターベースの投票を構築している次の HTML があります。ユーザーが4番目の星をクリックすると、クリックした星までのすべての星に、星が「点灯」してCSSクラスが呼び出されるように表示する新しいクラスが必要jquery-ratings-fullですか?

<div id="starRating">
     <img class="jquery-ratings-star" id="star1" />
     <img class="jquery-ratings-star" id="star2" />
     <img class="jquery-ratings-star" id="star3" />
     <img class="jquery-ratings-star" id="star4" />
     <img class="jquery-ratings-star" id="star5" />
</div>
4

3 に答える 3

5

で前の兄弟を選択し.prevAll、 で次の兄弟を選択できます.nextAll。

$('.jquery-ratings-star').click(function() {
    $(this)
      .prevAll().addBack().addClass('jquery-ratings-full').end().end()
      .nextAll().removeClass('jquery-ratings-full');
});
于 2013-06-27T20:55:31.083 に答える
2

.prevAll()- 前の兄弟をすべて選択します
.addBack()- 要素を選択に追加するthisので、クリックした星も塗りつぶします。

最初にすべての星から塗りつぶしを削除できますが、ユーザーが投票 (再度評価) を変更できない場合、これは必要ありません。

$('.jquery-ratings-star').click(function(){
   $('.jquery-ratings-star').removeClass('jquery-ratings-full');
   $(this).prevAll().addBack().addClass('jquery-ratings-full');     
});

実際のデモ: http://jsfiddle.net/P8wrM/2/

于 2013-06-27T20:56:41.433 に答える
0

再確認はしていませんが、このような方法でうまくいくはずです。

var stars = $(#starRating).children('img');

stars.click(function(e){
  var clickedIndex = $(e.target).index();

  // If you want user to be able to click a different star,
  // after they've already clicked one, do this first

  stars.removeClass('selected')    

  // Apply selected class to every star at or below the clicked index

  stars.each(function(){
    if ($(this).index() <= clickedIndex){
      $(this).addClass('selected');
    }
  });

  // Set a callback function to track or process rankings, if needed

  optionalCallback(clickedIndex);
});
于 2013-06-27T20:59:02.287 に答える