javascript - 合并 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>

示例: