爲什麼不是這個星級的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工作？

回答

相關問題