jquery - 延迟附加点击功能

Question

我无法将点击功能附加到一个非常简单的jquery，基本上我正在做的是隐藏一堆li然后淡入它们，当页面加载时我可以让它在documentready上工作，但我可以'当它附加到点击时，没有获得增加淡入的功能。

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {
        var delayInterval = 1000; // milliseconds
        $(this).delay(i * delayInterval).fadeIn();
    });
});

这非常有效，以 1 秒的增量淡化它们。

我想做的是将它绑定到一个点击事件，这“有效”，但它不会增加淡入，它们都只是同时弹出。

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {
        var delayInterval = 1000; // milliseconds
        $('.extra-related').click(function () { 
            $(".extra-holder ul li").delay(i * delayInterval).fadeIn();
        }); 
    });
});

正确答案（删除点击隐藏）： -

$(document).ready(function () {
    $(".extra-holder ul li").hide();
    var delayInterval = 300;

    $('.extra-related').click(function () {
        $(".extra-holder ul li").each(function (i) {
            $(this).delay(i * delayInterval).fadeIn();
        });
    }); 
});

Answer 1

您需要更改循环，将“ul li”移动到单击事件中的每个循环。

这是代码：

$(document).ready(function () {
  $('.extra-related').click(function () { 
      $(".extra-holder ul li").hide().each(function (i) {
       var delayInterval = 1000; // milliseconds
        $(this).delay(i * delayInterval).fadeIn();
      }); 
   });
});

Answer 2

工作 jsFiddle 演示

您必须将click事件处理程序附加到each循环之外：

$(document).ready(function () {
    $(".extra-holder ul li").hide();
    var delayInterval = 1000;

    $('.extra-related').click(function () {
        $(".extra-holder ul li").hide().each(function (i) {
            $(this).delay(i * delayInterval).fadeIn();
        });
    }); 
});

Answer 3

只需使用setTimeout()

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {

    var delayInterval = 1000; // milliseconds

    $('.extra-related').click(function () { 
            setTimeout(function(){
                $(".extra-holder ul li").fadeIn();
            }, delayInterval);
        }); 
    });
});