我是一个编写自己的jquery函数的新手,我发现调试它非常困难,因为当输入谷歌时错误消息不是太有帮助。
我有一个导航菜单的页面锚,当每一个被点击屏幕滚动到锚,元素将改变颜色取决于哪一个和悬停的颜色也会改变。我觉得真的很简单。
滚动总是有效的,动画偶尔工作,悬停工作,通常我必须点击链接两次。返回false只作用于你点击的第一个链接。
使用scrollTo和animation -colors插件。
谁能告诉我我做错了什么?$(".scrolltoanchor").click(function() {
$('a').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($($(this).attr("href")), {
duration: 750
});
switch ($(this).attr("id")) {
case 'personal':
$('.scrolltoanchor').animate({color: '#E4D8B8'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'blue');
},function(){
$(this).css('color', '#E4D8B8');
});
break;
case 'achievements':
$('.scrolltoanchor').animate({color: '#ffffff'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'red');
},function(){
$(this).css('color', '#ffffff');
});
break;
case 'skills':
$('.scrolltoanchor').animate({color: '#dddddd'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'orange');
},function(){
$(this).css('color', '#ffffff');
});
break;
}
return false;
});
对不起,我被灌输了,但我已经按照我认为正确的语法从我所学到的。是不是有什么我应该知道的东西阻碍了我的工作?
编辑:对不起,我忘了,我得到这个错误的(平均)每秒钟点击一个scrolltoanchor链接Uncaught TypeError: Cannot read property '0' of undefined
我不能发现一个真正的模式。有时它似乎只发生在那些以前没有被点击过的人身上,有时则不会。由于
你用错方法了。
你应该绑定一次悬停处理程序,并根据点击哪个来决定颜色。
最简单的方法可能是将颜色数据存储在查找表中,其中键是元素的id。
var ids = {
personal: {
over:'blue',
out:'#E4D8B8'
},
achievements: {
over:'red',
out:'#ffffff'
},
skills: {
over:'orange',
out:'#dddddd'
}
};
var current = ids.personal;
然后绑定处理程序一次,使用点击的处理程序的id
设置current
的颜色集。
var scroll_anchors = $(".scrolltoanchor");
scroll_anchors.hover( function() {
$(this).css( 'color', current.over );
},function(){
$(this).css( 'color', current.out );
});
scroll_anchors.click(function() {
$('a.selected').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($($(this).attr("href")), { duration: 750 });
current = ids[ this.id ]; // set the current color set based on the ID
scroll_anchors.animate({ color: current.out });
return false;
});
当您多次调用.hover()
时,您不会删除旧的事件处理程序,您只是添加一个新的。每次都会调用每个处理程序。您需要先调用.unbind("hover")
:
$(".scrolltoanchor").unbind("hover").hover(function () {
...
});
还可以在switch语句之外绑定悬停,以消除一些代码重复:
$(".scrolltoanchor").click(function () {
$('a').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($(this.href), {
duration: 750
});
var off, on;
switch (this.id) {
case 'personal':
off = '#E4D8B8';
on = 'blue';
break;
case 'achievements':
off = '#ffffff';
on = 'red';
break;
case 'skills':
off = '#dddddd';
on = 'orange';
break;
}
$('.scrolltoanchor')
.animate({ color: off })
.unbind("hover")
.hover(function () {
$(this).css('color', on);
}, function () {
$(this).css('color', off);
});
return false;
});