1

下面是我为动画导航方案编写的一些 jQuery 代码。

当我将代码写出来进行测试时，代码运行良好，如下所示：

$("#about").click(function(e) {
                e.preventDefault();
                if ( !$(".current").hasClass("about") ){
                    $("body").css("overflow-x","hidden");
                    $(".current").animate({left:'-1500px'}, 500).slideUp(500);
                    $(".about").animate({left:'+3000px'}, 1).delay(500).slideDown();
                    $(".about").animate({left:'0px'}, 500, function(){
                            $(".current").removeClass("current");
                            $(".about").addClass("current");
                            $("body").css("overflow-x","visible");
                    });
                }
            });

但是当我试图把它放在一个循环中并在 jquery 选择器中使用变量时，它停止了工作。数组中的每个字符串都sections对应一个锚标记的 id 及其匹配的 div 元素的类。

它一直运行到第 7 行，但以 开头的第 8 行和第 9 行$("."+sections[i])不起作用。 

var sections = ["about","photography","contact"];
for (var i=0; i<sections.length; i++) {
                $("#"+sections[i]).click(function(e) {
                    e.preventDefault();
                    if ( !$(".current").hasClass(sections[i]) ){
                        $("body").css("overflow-x","hidden");
                        $(".current").animate({left:'-1500px'}, 500).slideUp(500);
                        $("."+sections[i]).animate({left:'+3000px'}, 1).delay(500).slideDown();
                        $("."+sections[i]).animate({left:'0px'}, 500, function(){
                                $(".current").removeClass("current");
                                $("."+sections[i]).addClass("current");
                                $("body").css("overflow-x","visible");
                        });
                    }
                });

            }

console.log( $("."+sections[i]).attr("class") )给我未定义。我认为问题出在选择器上，但我不知道它是什么。id 选择器似乎工作正常，只是类选择器不行。任何建议表示赞赏！

4

1 回答 1

2

您的代码不起作用的原因是您只是在 for 循环中注册事件，而不是创建i要在相应处理程序中使用的闭包变量。到您的处理程序执行时。sections[3]"i" 将是 3，在 for 循环的最后一次迭代增量之后（在为数组中的最后一个元素注册事件之后）并且它保持在那里，所以你试图总是寻找未定义的。

把事情简单化：

一次加入选择器，只需注册一次处理程序，在处理程序内部，您试图通过这样做来引用它自己的 id，sections[i]您可以使用this.id它来获取 id 并在处理程序中使用它。

var sections = ["about", "photography", "contact"];
var selector = '#' + sections.join(',#'); //get your selector joined here.

    $(selector).click(function (e) {
        e.preventDefault();
        var id = this.id; // in your code sections[i] is same as id of the clicked element. SO just use this id.
        if (!$(".current").hasClass(id)) { 
            $("body").css("overflow-x", "hidden");
            $(".current").animate({
                left: '-1500px'
            }, 500).slideUp(500);
            $("." + id).animate({
                left: '+3000px'
            }, 1).delay(500).slideDown();
            $("." + id).animate({
                left: '0px'
            }, 500, function () {
                $(".current").removeClass("current");
                $("." + id).addClass("current");
                $("body").css("overflow-x", "visible");
            });
        }
    });
于 2013-07-05T04:07:30.247 回答