如何将当前迭代的元素（this）传递给.each（）函数内的setTimeout？

Question

我正在尝试使用each() 函数遍历caption div 中的每个caption-element，获取captionin、captionout 和delayout 属性，下一个removeClass 中给出的那个元素在@987654328 @ 属性（不检查是否已经添加了类）和addClass 到captionin 属性中给出的那个元素。这很简单，而且效果很好。

接下来我试图扭转添加和删除从captionin 和captionout 属性中获取的类的整个过程，但这次将其延迟delayout 属性中给出的时间量（通过使用@987654334 @ 功能）。而且它不起作用。

整个 ide 是为每个迭代的元素提供它自己的 setTimeout 延迟，该延迟取自 delayout 属性。

非常感谢为一个完整的菜鸟提供的每一个帮助:)

HTML：

<div class="caption">
    <div id="1" class="caption-container">
          <h1 class="caption-element animated" captionin="fadeInUp" captionout="bounceOut" delayout="2000">Caption 1</h1>
    </div>
    <div id="2" class="caption-container">
          <h1 class="caption-element animated" captionin="swing" captionout="fadeOutDown" delayout="4000">Caption 2</h1>
          <h1 class="caption-element animated" captionin="bounceInUp" captionout="lightSpeedOut" delayout="3000">Caption 2</h1>
    </div>
    <div id="3" class="caption-container">
          <h1 class="caption-element animated" captionin="bounceInUp" captionout="rotateOutUpLeft" delayout="2500">Caption 3</h1>
    </div>
</div>

jQuery

jQuery('.caption .caption-element').each(function () {
        var captionin = jQuery(this).attr('captionin');
        var captionout = jQuery(this).attr('captionout');
        var delayout = jQuery(this).attr('delayout');
        jQuery(this).removeClass(captionout).addClass(captionin);
        setTimeout(function () {
                jQuery(this).removeClass(captionin).addClass(captionout);
        }, delayout, captionin, captionout);
});

PS，请在投反对票前在评论中提问，谢谢:)

Answer 1

两个问题。

1- 范围。 this 在不同的功能中是不一样的this。 More about this。我通过在变量中捕获JQuery(this) 并在代码中使用它来解决这个问题。因此，当我想从代码中的其他位置访问所选元素 $elem 时，这不会让我感到惊讶。

2- 我假设setTimeout 需要一个数字作为时间单位的值。您正在传递一个字符串。

jQuery('.caption .caption-element').each(function() {
  var $elem = jQuery(this);


  var captionin = $elem.attr('captionin');
  var captionout = $elem.attr('captionout');
  var delayout = $elem.attr('delayout');

  console.log("Before: " + $elem.attr("class"));
  $elem.removeClass(captionout).addClass(captionin);

  setTimeout(function(captionin, captionout) {

    $elem.removeClass(captionin).addClass(captionout);
    console.log("After:" + $elem.attr("class"));

  }, Number(delayout), captionin, captionout);
});

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<div class="caption">
  <div id="1" class="caption-container">
    <h1 class="caption-element animated" captionin="fadeInUp" captionout="bounceOut" delayout="2000">Caption 1</h1>
  </div>
  <div id="2" class="caption-container">
    <h1 class="caption-element animated" captionin="swing" captionout="fadeOutDown" delayout="4000">Caption 2</h1>
    <h1 class="caption-element animated" captionin="bounceInUp" captionout="lightSpeedOut" delayout="3000">Caption 2</h1>
  </div>
  <div id="3" class="caption-container">
    <h1 class="caption-element animated" captionin="bounceInUp" captionout="rotateOutUpLeft" delayout="2500">Caption 3</h1>
  </div>
</div>

结果：

Before: caption-element animated
Before: caption-element animated
Before: caption-element animated
Before: caption-element animated
After:caption-element animated bounceOut
After:caption-element animated rotateOutUpLeft
After:caption-element animated lightSpeedOut
After:caption-element animated fadeOutDown