Question

我尝试用最简单的方法运行星级评分组件。我从this link获得了大部分代码。但不幸的是，页面中没有任何内容。

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="./rating-stars.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="./rating-stars.js"></script>
</head>
<body>

    <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever1" class="rating-value" value="2.56">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever2" class="rating-value" value="1.9">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever3" class="rating-value" value="4.1">
      </div>
    </div>
  </div>
</div>

</body>
</html>

然后是一个名为rating-stars.css的简单css文件：

.star-rating {
  line-height:32px;
  font-size:1.25em;
}

.star-rating .fa-star{color: yellow;}

最后javascript文件是：

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();
$(document).ready(function() {

});

问题是，页面中没有星标。我检查了控制台，似乎一切都很好，没有错误。

Answer 1

您可以使用rateYo插件

$(function () {
  $(".rateyo").rateYo({
    starWidth: "80px"
  }).on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.result').text('rating :'+ rating);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
    <div class="rateyo"
         data-rateyo-rating="1.5"
         data-rateyo-num-stars="5"></div>
         <span class='result'>0</span>
</div>

Answer 2

它使用fontawesome中的自定义字体来创建星星（参考此处：https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css）。该字体与该CSS文件相关，因此您需要确保包含该文件或本地具有该字体。

Answer 3

我没有看到字体链接真棒。有多种方法可以添加它检查

http://fontawesome.io/get-started/

在<head></head>

之间添加最简单的解决方案

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

星级评分如何以最简单的方式运作？

3 个答案: