时间戳

首页 > 解决方案 > 循环遍历 div 内的 span

javascript - 循环遍历 div 内的 span

问题描述

我希望能够单击一个 div 并让它在 div 内的跨度中循环。我可以让它与下面的代码一起工作，但我想在一个页面上让其中几个独立工作（所以他们只循环通过他们自己的孩子）。单击应该推进两个文本幻灯片，但具有独立的内容。

$(document).ready(function() {
  var divs = $('.timezones span').hide(),
    i = 0;

  function cycle() {
    divs.fadeOut(0).eq(i).fadeIn(0);
    i = ++i % divs.length;
  };
  cycle()
  $('.timezones').click(function() {
    cycle()
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
  <span>9am PDT</span>
  <span>10am MDT</span>
  <span>11am CDT</span>
  <span>12pm EST</span>
</div>

<div class="timezones">
  <span>5pm PDT</span>
  <span>6pm MDT</span>
  <span>7pm CDT</span>
  <span>8pm EST</span>
</div>

标签： javascriptjquerycycle

解决方案

我通常不必存储索引变量，而是在当前父容器中查找活动变量并使用next(). 当活动的下一个不存在时，您将恢复到first()

就像是：

$(document).ready(function() {

  function cycle() {
    // `this` is the .timezone element event occurred on
    var $spans = $(this).children(),
      $active = $spans.filter(':visible'),
      $next = $active.next().length ? $active.next() : $spans.first();

    $active.fadeOut(function() {
      $next.fadeIn()
    });

  }

  $('.timezones').click(cycle).find('span:eq(0)').show();

});
.timezones span {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
  <span>9am PDT</span>
  <span>10am MDT</span>
  <span>11am CDT</span>
  <span>12pm EST</span>
</div>

<div class="timezones">
  <span>5pm PDT</span>
  <span>6pm MDT</span>
  <span>7pm CDT</span>
  <span>8pm EST</span>
</div>

推荐阅读