jquery 使用bootstrap 鼠标点击星星评分

可以使用 Bootstrap 的评分组件和 jQuery 实现鼠标点击星星评分。以下是一个简单的示例：

HTML 代码：

<div class="rating">
  <span class="star" data-value="1"></span>
  <span class="star" data-value="2"></span>
  <span class="star" data-value="3"></span>
  <span class="star" data-value="4"></span>
  <span class="star" data-value="5"></span>
</div>

CSS 样式：

.rating {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(star.png) no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

.star.active {
  background-color: #f9d71c;
}

JavaScript 代码：

$(function() {
  // 初始化评分为0
  var rating = 0;

  // 鼠标移入星星时，高亮之前的所有星星
  $('.star').hover(function() {
    $(this).prevAll().addClass('active');
  }, function() {
    $(this).prevAll().removeClass('active');
  });

  // 鼠标点击星星时，计算评分并高亮相应数量的星星
  $('.star').click(function() {
    rating = $(this).data('value');
    $(this).addClass('active').prevAll().addClass('active');
    $(this).nextAll().removeClass('active');
  });
});

这个示例使用了一个包含五个星星的评分组件，每个星星都是一个 span 元素，通过设置不同的 data-value 属性来表示不同的评分值。在 JavaScript 代码中，我们使用 jQuery 监听鼠标移入、移出和点击事件，并根据事件来高亮相应数量的星星和计算评分值。