合並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>

例：