font-awesome - 如何填写 Font Awesome 星级的前两颗星？

Question

我正在尝试在 http://fortawesome.github.io/Font-Awesome/examples/ 更改 fontawesome 星级评分中前两颗星的颜色

我已经为第一个和第二个跨度分配了一个类(class)，但它不起作用

我的 html 是

<span class="rating">
<span class="star filled"></span>
<span class="star filled"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>

我的 css 是

.rating {
       unicode-bidi:bidi-override;
       direction:rtl;
       font-size:30px;
}
.rating span.star {
      font-family:FontAwesome;
      font-weight:normal;
      font-style:normal;
      display:inline-block;
}
.rating span.star:hover {
     cursor:pointer;
}
.rating span.star:before {
     content:"\f006";
     padding-right:5px;
     color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
     content:"\f005";
     color:#e3cf7a;
}


.filled{ color:#e3cf7a; }

JSFIDDLE http://jsfiddle.net/code_snips/ttyYD/

Answer 1

试试这个
Jsfiddle
脚本:

$('.rating span.star').click(function(){
                var total=$(this).parent().children().length;
                var clickedIndex=$(this).index();
                $('.rating span.star').removeClass('filled');
                for(var i=clickedIndex;i<total;i++){
                    $('.rating span.star').eq(i).addClass('filled');
                }
            });