星不显示 jquery 栏评级答案

【问题标题】：Star not displaying jquery bar rating星不显示 jquery 栏评级
【发布时间】：2017-01-07 08:22:54
【问题描述】：

我的代码

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="../../assets/jquery-bar-rating121/dist/themes/fontawesome-stars.css">

<select id="example">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js">   </script>
<script src="../../assets/jquery-bar-rating121/dist/jquery.barrating.min.js"></script>

jquery：

$('#example').barrating({
        theme: 'fontawesome-stars'
 });

星星没有显示，它只显示选项选择下拉菜单。 jquery 和 jquery.barrating.min.js 已经包含，fontawesome-stars.css 也已经包含在顶部，没有错误。代码有什么问题吗？为什么星星不显示？

我是否只需要这两个文件 jquery.barrating.min.js 和 fontawesome-stars.css 才能让这个插件工作？

【问题讨论】：

你能确保你的所有脚本都在浏览器中正确加载吗？您可以使用开发者工具。

标签： javascript jquery html css

【解决方案1】：

确保按以下顺序加载脚本和 CSS。这是使其工作所需的最少文件。

我是否只需要这两个文件 jquery.barrating.min.js 和 fontawesome-stars.css 才能让这个插件工作？

是的，除此之外，您还需要拥有font-awesome.css 和jquery.js。另外，最后别忘了在document是ready之后使用$(function () { })来执行代码。

为我工作：

$(function() {
  $('#example').barrating({
    theme: 'fontawesome-stars'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="http://antenna.io/demo/jquery-bar-rating/jquery.barrating.js"></script>
<link href="http://antenna.io/demo/jquery-bar-rating/dist/themes/fontawesome-stars.css" rel="stylesheet"/>

<select id="example">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

【讨论】：

我错过了 $(function() {
@TomKur 我会将该行添加到我的答案中。