0

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

我有 5 个单独的星星图像，这些图像附加了监听器，因此用户可以单击每个星星（需要这样）

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

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

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

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

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

谢谢阅读

4

3 回答 3

2

使用 Jquery prevAll()切换所有先前星星的类:)

于 2013-07-26T07:00:59.207 回答
0

你可以在纯 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 中，您可以重复 abackground-image并通过操纵宽度来控制星数

小提琴

于 2013-07-26T07:15:51.370 回答
0

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

查询

$('.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">♥&lt;/span> 
<span class="star" name="2">♥&lt;/span> 
<span class="star" name="3">♥&lt;/span> 
<span class="star" name="4">♥&lt;/span> 
<span class="star" name="5">♥&lt;/span>

CSS

span{font-size:20px;}
.selected{color:red;}
于 2013-07-26T07:49:46.393 回答