javascript - Jquery switch 语句偶尔会起作用

Question

我对编写自己的 jquery 函数很陌生，我发现调试它非常困难，因为将错误消息放入 google 时并没有太大帮助。

我有一个用于页面 anchor 的导航菜单，当单击每个 anchor 时，屏幕将滚动到 anchor ，元素将根据哪个元素改变颜色，悬停颜色也会改变。我认为真的很简单。

滚动总是有效，动画偶尔有效，悬停通常有效我必须点击链接两次。返回 false 仅适用于您点击的第一个链接。

这使用了 scrollTo 和 animate-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 链接时就会收到此错误

未捕获的类型错误:无法读取未定义的属性“0”

我无法发现真正的模式。有时它似乎只发生在以前没有被点击过的那些上，有时则不会。 谢谢

Answer 1

您采用了错误的方法。

您应该绑定(bind)一次悬停处理程序，并根据单击的事件决定颜色。

最简单的方法可能是将颜色数据存储在查找表中，其中的键是元素的 ID。

var ids = {
    personal: {
        over:'blue',
        out:'#E4D8B8'
    },
    achievements: {
        over:'red',
        out:'#ffffff'
    },
    skills: {
        over:'orange',
        out:'#dddddd'
    }
};
var current = ids.personal;

然后绑定(bind)一次处理程序，并使用被点击的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;
});