jQuery 选择器中的变量

Question

下面是我为动画导航方案编写的一些 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 行，但以 $("."+sections[i]) 开头的第 8 行和第 9 行不起作用。

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 选择器似乎工作正常，只是类选择器不行。任何建议表示赞赏！

Answer 1

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

保持简单：

立即加入选择器并注册一次您的处理程序，在您的处理程序中，您试图通过执行sections[i] 来引用它自己的 id，您可以使用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");
            });
        }
    });