合併html，css和javascript後的結果不相同

Question

要根據此代碼製作條形圖 - http://codepen.io/CreativePunch/pen/AekEC我將html，css和js代碼合併到單個html文件中。但我的結果不一樣。這是我的代碼 - https://codepen.io/alimur/pen/MpdZYm。我認爲問題創造了js函數，這裏是JS分部分

<script type="text/javascript"> 
$(function() { 
$("#bars li .bar").each(function(key, bar) { 
var percentage = $(this).data('percentage'); 

$(this).animate({ 
    'height' : percentage + '%' 
}, 1000); 
}); 
}); 

問題出在哪裏？

Answer 1

嗯，我檢查了你的Codepen。你正在使用jQuery，但你並不需要它。在codepen中，點擊'JS'旁邊的設置圖標。然後在「添加外部JavaScript」下添加以下URL：//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'

您需要在使用它之前加載jQuery。在你的HTML，你可以在加載這樣的：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

例子：