Javascript 循环通过div内的跨距

我希望能够单击一个div，让它在div内的跨距之间循环。我可以让它使用下面的代码，但我希望在一个页面上有几个这样的代码，它们可以独立工作（因此它们只能循环使用自己的子代）。单击将推进两个文本幻灯片，但内容独立

$（文档）.ready（函数（）{
var divs=$（'.timezones span'）.hide（），
i=0；
功能循环（）{
衰减（0）、均衡（i）、衰减（0）；
i=+i%divs.length；
};
循环（）
$（'.timezones'）。单击（函数（）{
循环（）
})
});

太平洋时间上午9点
MDT上午10点
上午11点CDT
美国东部时间下午12点
太平洋时间下午5点
下午6点MDT
晚上7点CDT
东部时间晚上8点
尝试以下方法：

 $(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'）
 试试这个

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


});

祝你好运
 我通常不必存储索引变量，而是在当前父容器中查找活动变量，并使用
next（）
。当激活的下一个不存在时，您将恢复到
first（）

比如：


$（文档）.ready（函数（）{
功能循环（）{
//`this`是上发生的.timezone元素事件
var$spans=$（this.children（），
$active=$spans.filter（':visible'），
$next=$active.next（）.length？$active.next（）：$spans.first（）；
$active.fadeOut（函数（）{
$next.fadeIn（）
});
}
$（'.timezones'）。单击（循环）。查找（'span:eq（0）'）。显示（）；
});
。时区跨度{
显示：无
}

太平洋时间上午9点
MDT上午10点
上午11点CDT
美国东部时间下午12点
太平洋时间下午5点
下午6点MDT
晚上7点CDT
东部时间晚上8点
我用这个代码得到了它：

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

    }); 

对所有时区使用全局
i
将是一个问题。请注意，OPT中的“因此他们只循环他们自己的子对象”这很好，但是单击事件是否可以循环两个div？因此，如果你在一个分区中前进，你也在另一个分区中前进。谢谢哦，您想让所有.timesones实例都前进，而不管单击哪个实例？这并不完全清楚。如果是这样的话，为什么不只点击一个“全部推进”按钮而不点击任何地方呢？是的，一切都应该推进。“全部推进”按钮也会起作用。然后您需要使用
$（“.timezones”）进行修改。每个…
并使用我为每个实例提供的代码内部循环函数。在
each
callbck
中，此
将是当前的迭代时区元素，循环函数中的所有代码都应在每个回调函数中工作