Question

有一个评级“控制”的例子我在这里找到http://jsfiddle.net/RpfLa/400/它工作正常，但它没有能力在点击时突出显示星号。

虽然要使其正常工作，我只需将class="rated"添加到标记s，但它仍然有点复杂。

 <!-- a rating with 1 star -->
    <span class='star-rating'>
      <s class='rated'>
       <s>
        <s>
         <s>
          <s>
          </s>
         </s>
        </s>
       </s>
      </s>
     </span>

我只是想不出那个有效的算法。

所以当我知道评分是什么时

var numStars = $(e.target).parentsUntil("span").length+1;

如何在s之前找到相关的class="rated"并制作相关的{{1}}？

Answer 1

jsFiddle Demo

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
        $(e.target).parentsUntil("div").andSelf()
        .addClass('rated').end().end()
        .find('.rated').removeClass('rated');
    });
});

相关链接：andSelf，end，addClass

其中大多数都是直观命名的。在使用andSelf之类的过滤器后，parentsUntil会将当前元素添加到匹配的集合中。 end取消了过滤。

Answer 2

你可以选择顶部元素并循环遍历所有星星吗？类似的东西：

starSpan = $(".star-rating"); //or whatever selector you want to use for the span
currentStar = starSpan
for (i = 0; i < 5; i++) {
    currentStar = currentStar.children('s :first')
    if (i <= numStars) {currentStar.attr('class','rated')}
    else {currentStar.attr('class','')}
}

这样你就可以降低星级评分。

Answer 3

$(e.target).parent('div').find('.rated').removeClass('rated');
$(e.target).addClass('rated');
$(e.target).parentsUntil("div").addClass('rated');

http://jsfiddle.net/KczMC/

试图让星级控制记住评级

3 个答案:

jsFiddle Demo