javascript - 试图让星级控制记住评级

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

Answer 1

jsFiddle 演示

$(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,,,endaddClass

其中大部分都是直观命名的。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/