合并html、css和javascript后的结果不一样

为了根据这段代码制作条形图，我将html、css和js代码合并到一个html文件中。但我的结果不一样。这是我的代码-。我认为这个问题会给js函数带来麻烦，下面是js部分-

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

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

$（函数（）{
$（“#bar li.bar”）。每个（函数（键，bar）{
变量百分比=$（this）.data（'percentage'）；
$（此）。设置动画({
“高度”：百分比+“%”
}, 1000);
});
});

---

哪里出了问题？

好吧，我已经检查了你的密码笔。您正在使用jQuery，但并不需要它。在codepen中，单击“JS”旁边的设置图标。然后在“添加外部JavaScript”下添加以下URL://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'

您需要在使用jQuery之前加载它。在HTML中，您可以按如下方式加载：

示例：

---

“问题出在哪里？”不是一个合适的问题。堆栈溢出不是调试服务。“我认为问题为js函数创建”并不是对问题的真正描述。你能描述一下这里到底出了什么问题吗？很可能你是在jquery加载之前运行js的。