为什么不是这个星级的javascript/CSS工作？

我一直在尝试了好一段时间才能从尼克·萨卢姆这个5星级评级控制工作： http://callmenick.com/post/five-star-rating-component-with-javascript-css 为什么不是这个星级的javascript/CSS工作？

这里是我的尝试：https://jsfiddle.net/n6qzkpcy/2/

有人能看到我在做什么不对的它没有显示任何明星？

// target element 
var el = document.querySelector('#el'); 

// current rating, or initial rating 
var currentRating = 0; 

// max rating, i.e. number of stars you want 
var maxRating= 5; 

// callback to run after setting the rating 
var callback = function(rating) { alert(rating); }; 

// rating instance 
var myRating = rating(el, currentRating, maxRating, callback);

来源

2017-01-10 user1946932

您是否检查了小提琴的控制台？它说：“拒绝执行来自'https://raw.githubusercontent.com/callmenick/five-star-rating/master/js/src/rating.js'的脚本，因为它的MIME类型（'text/plain'）不可执行，并且启用严格的MIME类型检查。“ 您使用的GitHub链接没有可执行文件mimetype，因此fiddle.com不允许执行它 – Sanchit

控制台中有两个错误。首先，您不能从github载入'svg'星号，因为它有'text/plain'编码，所以你需要下载它并把它放在其他地方，也就是你所包含的'rating.js'文件，不会在全球范围内暴露'rating'函数，所以你打电话给未定义的函数 – haxxxton

我会建议，下载库并在本地检查它。我做了，它的工作效果很好 – Sanchit

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Five Star Rating</title> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/style.min.css"> 
    <link rel="stylesheet" href="css/rating.min.css"> 
</head> 
<body> 

<ul class="c-rating" id="el"> 

</ul> 

<script src="js/dist/rating.min.js"></script> 
<script type="text/javascript"> 
    var el = document.querySelector('#el'); 

    // current rating, or initial rating 
    var currentRating = 1; 

    // max rating, i.e. number of stars you want 
    var maxRating= 5; 

    // callback to run after setting the rating 
    var callback = function(rating) { alert(rating); }; 

    // rating instance 
    var myRating = rating(el, currentRating, maxRating, callback); 

</script> 
</body> 
</html>

请使用上面的HTML页面，然后将所需要的资源从git的下载。你会看到结果。

来源

2017-01-10 08:24:20 Sanchit

尤里卡 - 谢谢。我想原始

需要被您的

– user1946932

替换是的。需要评级的元素应该有'el'作为JS的工作和'c_rating'为CSS的工作 – Sanchit

为什么不是这个星级的javascript/CSS工作？

回答

相关问题