我尝试使用for循环来保持DRY编码方式,但输出让我感到困惑[封闭问题]

Question

有这样的DOM结构:

<div class="info" id="step1">
<a href="#" id="next_step_1"> ok </a>
</div>

<div class="info" id="step2">
<a href="#" id="next_step_2"> ok </a>
</div>

<div class="info" id="step3">
<a href="#" id="next_step_3"> ok </a>
</div>

...(等等)

Div .info有display:none属性(除了1),所以我想要实现:当我点击ok时,这个div淡出,接下来div淡入.

当然,为每个div编写函数并不是DRY,所以我尝试了这个:

  for (var i=1; i<5; i++){
       $("body").delegate('#next_step_'+i, 'click', function(){
       $("#step"+i).fadeOut();
       $("#step"+i+1).fadeIn();
       });

    }

这段代码不起作用,我试过:

  for (var i=1; i<5; i++){
       $("body").delegate('#next_step_'+i, 'click', function(){
       alert("#step"+i)
       });

    }

警报工作(所以代表i是1)但警报是#step5.

这让我感到困惑,我认为JS为每个div输出5个函数...帮助我解决这个问题.

Answer 1

你为什么不单独上课info？它单独保存分配委派功能

$("body").delegate(".info", 'click', function(){
    $(this).fadeOut();
    $(this).next().fadeIn();
});
/*
    As of jQuery 1.7+ 
    $("body").on("click", ".info", function(){
        $(this).fadeOut();
        $(this).next().fadeIn();
    });
*/

此外,从jQuery 1.7+开始,你应该使用它.on().on结合bind,live和delegate功能.

由于封闭问题,您的代码不起作用:

for (var i = 0; i < 5; i++) {
    (function (i) {
        $("body").delegate('#next_step_' + i, 'click', function () {
            alert("#step" + i)
        });
    })(i);
}

我无法解释它.我只知道我有一个这样的问题,我用它固定了(参见参考资料).我还是鼓励使用第一种方法.

Answer 2

on截至1.7.0,代表已被取代

用于on代替事件

试试这个

$("body").on('click', '.info', function(){
    var $this = $(this);      
    $this.nextAll('.info').first().fadeIn();
    $this.fadeOut();
});

工作小提琴

由于经典的闭包问题,您的代码不起作用.i所有事件实例将共享值,因为事件发生在以后.所以i永远是最后一次迭代的价值.

你的榜样

我更喜欢这个,而不是在IFFY中绑定它

 for (var i = 1; i < 5; i++) {
        $("body").delegate('#next_step_' + i, 'click', bindClick(i));
    }

    function bindClick(i) {
        return function() {
            alert("#step"+i)
        }
    }

当您返回一个函数时,该函数形成一个闭包,在函数绑定时保存最外层变量的状态,创建一个对返回的函数唯一的新作用域.由于变量与范围相关联,因此您可以访问正确的值.

如果您在理解上述方法时遇到困难,可以将其写为IIFE(立即调用函数表达式),即立即执行函数,为执行该函数的变量创建新范围,这就是shawn所具有的书面.

检查小提琴

但在您的情况下,您正在尝试访问所有处理程序通用的变量.