用jQuery写一个通过操作类和添加属性的方法,实现星级评价。
时间: 2024-05-07 20:17:48 浏览: 66
好的,我来为您编写一个示例代码:
HTML代码:
```html
<div class="rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
```
CSS代码:
```css
.rating {
font-size: 0;
}
.star {
display: inline-block;
margin-right: 5px;
width: 20px;
height: 20px;
background-image: url(star.png);
background-size: 20px 20px;
background-repeat: no-repeat;
cursor: pointer;
}
.star.active {
background-position: 0 -20px;
}
```
JavaScript代码:
```javascript
$(function() {
$(".star").click(function() {
$(this).addClass("active");
$(this).prevAll().addClass("active");
$(this).nextAll().removeClass("active");
$(this).parent().attr("data-score", $(this).index() + 1);
});
});
```
以上代码实现了一个星级评价的效果,当用户点击某个星星时,该星星及其之前的所有星星会变为激活状态,而其之后的星星则会变为非激活状态,并将评分数据存储在父元素的 `data-score` 属性中。您可以根据实际需求对代码进行修改和优化。
阅读全文