循环遍历 div 内的 span答案

【问题标题】：Cycle through spans inside div循环遍历 div 内的 span
【发布时间】：2020-05-11 01:56:24
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery cycle

【解决方案1】：

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

【讨论】：

这很好，但是点击事件是否可以循环两个 div？因此，如果您在一个 div 中前进，那么您也在另一个 div 中前进。谢谢！
哦，您希望所有 .timesones 实例都前进，而不管单击哪一个？这并不完全清楚。如果是这种情况，为什么不只使用一个“全部推进”按钮而不是点击任何地方？
是的，一切都应该提前。提前全部按钮也可以。
然后您需要使用$('.timezones').each... 进行修改，并为每个实例使用我在循环函数中的代码。在 each callbck this 内将是当前迭代时区元素，并且循环函数内的所有代码都应该在每个回调内工作

【解决方案2】：

试试下面的方法：

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

【讨论】：

对所有时区使用全局 i 将会有问题。注意“所以他们只循环通过他们自己的孩子”在OP

【解决方案3】：

试试这个

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


});

祝你好运！

【讨论】：

【解决方案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();

    });

【讨论】：