1

我有以下 HTML，我正在其中建立基于星级的投票。如果用户单击第四颗星，我希望它在哪里，直到并包括他们单击的那颗星都有新的类，该类将显示星星“亮起”，以便它们具有名为的 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 回答