Javascript 明星评级是如何以最简单的方式工作的？_Javascript_Jquery_Html_Css

Javascript 明星评级是如何以最简单的方式工作的？

javascript jquery html css

Javascript 明星评级是如何以最简单的方式工作的？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试用最简单的方法运行星级组件。我大部分代码都是从你那里得到的。但不幸的是，页面中没有显示任何内容以下是html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styles

我正在尝试用最简单的方法运行星级组件。我大部分代码都是从你那里得到的。但不幸的是，页面中没有显示任何内容

以下是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>

最后，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() {

});

问题是，页面中没有星星出现。我检查了控制台，似乎一切正常，没有错误。
它正在使用fontawesome的自定义字体创建星星（此处引用：）。字体与该CSS文件相关，因此您需要确保包含该文件，或者确保字体在本地。
您可以使用该插件

$（函数（）{ 美元（“.rateyo”）.rateyo({ 星宽：“80px” }).on（“rateyo.change”），函数（e，数据）{ var评级=数据评级； $（this）.parent（）.find（'.result'）.text（'rating:'+rating）； }); }); 0 我看不到字体真棒的链接。有多种方法可以添加它最简单的解决方案是在但是我想，我也需要字体awsome的js？@kamyarasstesh-FontAwesome只提供CSS和fontfiles来加载图标。不需要JS。这不能回答问题。我如何增加星星的大小？您可以使用starWidth选项更改大小。我编辑了代码。再试一次。@kamyarastesh-FontAwesome仅提供CSS和FontAwesome文件来加载图标。不需要JS。正如@DanielApt所提到的，font awesome只是关于样式的 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() { });