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

标签 javascript jquery

<分区>

有这样的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 .infodisplay:none 属性(除了 1),所以我想要实现的是:当我点击确定时,这个 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)
       });

    }

警报有效(因此委托(delegate) i 为 1)但警报为 #step5

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

最佳答案

为什么不直接使用 info 类?它节省了单独分配委托(delegate)功能

$("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 结合了 bindlivedelegate 功能。

由于关闭问题,您的代码无法运行:

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

我真的无法解释。我只知道我有这样的问题,我用它解决了它 ( See )。我仍然鼓励使用第一种方法。

关于javascript - 我尝试使用 for 循环来保持 DRY 编码方式,但输出让我感到困惑 [关闭问题],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17737562/

相关文章:

Javascript 原型(prototype) : Replacement vs Addition

javascript - x = +x 在 JavaScript 中的效果

javascript - 获取选定的选项并在 Angularjs 中使用 $http 传递它?

带有 strip 和悬停的 Jquery 数据表

javascript - Twitter Bootstrap 模态通过 Ajax 更改内容

javascript - ExecJS::RuntimeError <%= javascript_include_tag 'application' , 'data-turbolinks-track' => true %>

javascript - 有什么方法可以使用 Javascript 或 CSS 确定客户端浏览器中的哪一行中的哪些词?

javascript - 使用 Node js 抓取 <ul> 中的所有列表 <li> 项

javascript - jQuery .html() 中的事件不会检测到

javascript - 我的 Javascript 无法在 localhost XAMPP 中运行