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 秒的增量淡出它们。

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

$(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();
      }); 
   });
});