我有点想弄清楚这里发生了什么，所以我想我会转向群众：
我正在尝试实施此技能组插件：http://www.jqueryscript.net/chart-graph/jQuery-Plugin-To-Create-Animated-Skill-Experience-Bars-Skillset-js.html
我在尝试调用技能组功能时遇到经典的“未定义不是函数”错误。有一点需要注意（不确定它是否有所作为）这是在ASP.NET的MVC模板中。以下是我在layout.cshtml底部的脚本：
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/skillset.js"></script>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript">
var object = [
{
'headline': 'HTML & CSS',
'value': 8,
'length': 9,
'description': 'Significant experience and knowlage of HTML(5) and CSS functionality and use.'
},
{
'headline': 'JavaScript & jQuery',
'value': 6,
'length': 5,
'description': 'Experience with object-oriented JavaScript. </br> Extended knowlage of DOM manipulation in aiding and extending the UI.'
},
{
'headline': 'Ruby & Python',
'value': 3,
'length': 5,
'description': 'Experience with object-oriented JavaScript. </br> Extended knowlage of DOM manipulation in aiding and extending the UI.'
}
];
$(document).ready(function () {
$("#skillset").skillset({
object: object,
duration: 40
});
});
</script>
这是skillset.js文件（位于/Scripts/skillset.js）：
(function ( $ ) {
$.fn.skillset = function( options ) {
_this = this;
$.fn.extend({
isOnScreen: function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
},
setRun: function(option){
hasRun = option;
},
checkRun: function(){
return hasRun;
}
});
var settings = $.extend({
// These are the defaults.
object: "",
duration: 80
}, options );
$(this).setRun(false);
if($(this).isOnScreen() && !$(this).checkRun() ){
create_trigger($(this));
}
function bar_loop(start,value,length){
var j=0;
for(var i = 0; i < length; i++){
setTimeout(function(){
if(j < value){
var html = '<div class="full"></div>';
$(html).appendTo(start).css('width',100/length+'%');
}else{
var html = '<div class="empty"></div>';
$(html).appendTo(start).css('width',100/length+'%');
}
j++;
},settings.duration*i/(length/10));
}
}
function create_trigger(element){
var key, count = 0;
for(key in settings.object) {
if(object.hasOwnProperty(key)) {
count++;
}
}
$(element).setRun(true);
start = $(element).append('<ul class="skillset-list"></ul>');
for(var i = 0; i < count; i++){
start = $(element).find('ul');
var html = '<li class="skill-'+(i+1)+'""><p>'+settings.object[i]['headline']+' <span class="icon-info-circled" data-info="'+settings.object[i]['description']+'"></span></p><div class="bar"></div></li>';
html = $(html).appendTo(start).find('.bar');
var value = settings.object[i]['value'];
var length = settings.object[i]['length'];
bar_loop(html,value,length);
}
}
$(document).scroll(function(){
if($(_this).isOnScreen() && !$(_this).checkRun()){
create_trigger($(_this));
}
});
$('.icon-info-circled').hover(function(){
$(this).css('color','#222222');
$(this).parent().parent().append('<div id="list-info" ><p>'+$(this).data('info')+'</p></div>');
setTimeout( function(){
$('#list-info').css({'opacity':0.9, 'bottom':50});
},100);
}, function(){
$(this).css('color','auto');
$('#list-info').remove();
});
};
}( jQuery ));
任何帮助都会非常感激。谢谢！
答案 0 :(得分：4)
确保您没有多次加载脚本.....确保javascript文件只加载一次（请参阅jquery不在您的脚本渲染包中！因为您也单独调用它）< / p>
答案 1 :(得分：1)
@Kalish积分是有效的，很可能是导致您出现问题的原因。 验证您是否可以查看已编译html的代码并验证加载了哪些脚本和CSS。同时，您可以使用开发人员工具（取决于您的浏览器）获取有关已编译html的更多洞察信息