Question

我有以下HTML，我正在建立基于星标的投票。如果用户点击第四颗星所有星星，并且包括他们点击的星星都有新的类可以显示星星“点亮”，这样他们就拥有了名为jquery-ratings-full的CSS类，我想要它。？

<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>

Answer 1

您可以使用.prevAll选择以前的兄弟姐妹，并选择.nextAll的兄弟姐妹：

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

Answer 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/

Answer 3

我没有仔细检查，但是这样的事情应该可以解决问题。

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);
});

如何在单击的类之前的元素中添加类？

3 个答案: