jquery 使用bootstrap 鼠标点击多个星星评分可以选半个
时间: 2023-08-03 12:02:58 浏览: 51
在Bootstrap中,可以使用`rating`组件来实现一个星级评分。在jQuery中,可以使用`raty`插件来实现这个功能。要允许半星评分,需要设置`half:true`选项。
首先,你需要在HTML文件中引入必要的文件,包括jQuery、Bootstrap和`raty`插件的JS和CSS文件。然后,在一个`div`元素中添加`rating`类。你还可以使用`data-size`属性来设置星星的大小,使用`data-star-count`属性来设置星星的数量。
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.1/jquery.raty.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.1/jquery.raty.min.js"></script>
<div class="rating" data-size="lg" data-star-count="5"></div>
```
然后,在JavaScript文件中,初始化`rating`组件,并设置`half:true`,这样就可以允许半星评分了。
```javascript
$(function() {
$('.rating').raty({
half:true
});
});
```
这样,当用户在星星上点击鼠标时,就可以选择半星评分了。