我花了很长时间试图弄清楚这里发生了什么，所以我想我应该向大众求助:
我正在尝试实现这个技能组插件: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 ));任何帮助将不胜感激。谢谢!
最佳答案
确保您没有多次加载脚本......确保 javascript 文件仅加载一次(请注意 jquery 不在您的脚本渲染包中!因为您也单独调用了它)
关于javascript - "Uncaught TypeError: undefined is not a function"带有简单的 Javascript 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29652224/