5星评级的前端UI图形机制

Question

我有一个5星评级系统，从功能角度来看很好。

我有5个独立的星星图像，附有听众，因此用户可以点击每个星星（需要这样）

每颗星都有一个数据等级（1-5），以及一个jquery选择并添加到json对象的数据产品。

我唯一需要帮助的是实际图形

当用户选择4颗星时，第四颗星当前编码为切换一个类以显示在选定状态。

当用户选择4时，我想要3，2和1也被选中。同样，如果他们改变主意并点击星号2，我希望4和3成为未选中，1则保持选中状态。

如果有一种方法可以使用伪选择器在纯CSS中实现这一点，那将是完美的。如果没有，则jQuery很好。

感谢您阅读

Answer 1

使用Jquery prevAll()来切换以前所有星星的类：）

Answer 2

你可以在纯css中做这样的事情，

示例html：

<div data-rating='2'>
    <span class='star two'></span>
</div>

示例css：

.star{
    background: url('your-star-image-url') repeat;   
    height: 128px;
    width: 128px;
    float: left;
}
.two{
    width: 256px;
}

在css中，您可以重复background-image并通过操纵宽度来控制星数

Fiddle

Answer 3

这是一种简单的方法，DEMO http://jsfiddle.net/yeyene/w9S9P/

JQUERY

$('.star').on('click', function(){
    $('.star').removeClass('selected');
    var count = $(this).attr('name');
    for (var i=0; i<count; i++){        
        $('.star').eq(i).addClass('selected');
    }
});

HTML

<span class="star" name="1">♥</span> 
<span class="star" name="2">♥</span> 
<span class="star" name="3">♥</span> 
<span class="star" name="4">♥</span> 
<span class="star" name="5">♥</span> 

CSS

span{font-size:20px;}
.selected{color:red;}