Question

我正在尝试使用caption-element函数迭代caption div中的每个each()，获取captionin，captionout和delayout属性，removeClass属性中给出的该元素的下一个captionout（不检查该类是否已被添加）和addClass属性中给出的该元素的captionin。这很简单，效果很好。

接下来，我正在尝试撤消添加和删除从captionin和captionout属性中获取的类的整个过程，但这次要将它延迟delayout中给出的时间属性（使用setTimeout()函数）。它不起作用。

整个ide是为每个迭代元素赋予它自己的delayout属性的setTimeout延迟。

对一个完整菜鸟的每一个帮助都非常感激：）

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，请在downvoting之前提出评论问题，谢谢：）

Answer 1

两个问题。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

结果：

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

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

1 个答案: