在 div 内循环跨度

Question

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

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

Answer 1

试试下面的方法：

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

  function cycle(selectedDiv) {
    selectedDiv.fadeOut(0).eq(i).fadeIn(0);
    i = ++i % selectedDiv.length;
  };

  $('.timezones').click(function() {

    cycle( $(this).children('span'));
  })
});

下面这行代码可以帮你找出点击的范围div

$(this).children('span');

Answer 2

试试这个

$(document).ready(function() {
 var divs = $('.timezones span').hide(), i = 0; 
function cycle(elm){ 
let spans= elm.find('span');
spans.fadeOut(0).eq(i).fadeIn(0); 
i = ++i % spans.length;
 }; 

cycle() 

$('.timezones').each(
function() { 
cycle($(this)) 
}) 


});

祝你好运！

Answer 3

不必存储索引变量，我通常会在当前父容器中查找活动变量并使用 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>

Answer 4

我用这段代码得到了它：

$(document).ready(function() {


        $( ".timezones" ).click(function() {
          $( ".timezones " ).each(function( i ) {
            var $spans = $(this).children(),
              $active = $spans.filter(':visible'),
              $next = $active.next().length ? $active.next() : $spans.first();

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

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

    });

在 div 内循环跨度

Cycle through spans inside div

javascript

jquery

cycle