Javascript 在JS中循环使用多个相同的标记块，并在不受干扰的情况下执行相同的功能

我希望淡入/淡出文本标签，在给定块中一次只显示一个标签。标记如下所示：

 <div class="subtitles">
   <h3 class="subtitle" data-order="0">
     label 1
   </h3>
   <h3 class="subtitle" data-order="1">
     label 2
   </h3>
   <h3 class="subtitle" data-order="3">
     label 3
   </h3>
 </div>

 [repeat block nth number of times]

但是页面上不止一个块，事情就变得错综复杂了。如何在多个块上循环并应用相同的行为？

尝试每个块

代码： $'.subtitles'。每个函数{$this.find'h3.subtitle'；$this.hide}

编辑：根据问题OP，i变量变得variableTangle，原因是javascript提升。请阅读此链接，了解发生在

上的情况，您需要将所需的行为封装在函数中，以便每组循环元素都有自己的偏移量

function cycle($els) {
    var i = 0;
    $els.hide();
    (function loop() {
        $els.eq(i++).fadeIn(400)
            .delay(1000)
            .fadeOut(400, loop);
        i %= $els.length;
    })();
}

然后您可以使用.each启动每组字幕的循环：

$('.subtitles').each(function() {
    cycle($(this).find('h3.subtitle'));
});

---

谢谢-我这样做了，但是我弄得很纠结，而且它没有在每个区块上一致应用，很可能是因为您没有错误地声明var I使其成为全球的，这也不是起重问题。这是一个简单的全局vs局部的例子，而提升涉及到函数中任意位置声明的变量，就像它们被声明在函数的顶部一样，你需要单独的块使它们的动画完全同步吗？由此产生的一个推论是，它们每个都有相同数量的子节点。不，如果需要，它们可以在不同的时间间隔开始。运动比我想象的更优雅have@Rockafella当代码非常重要时，将它们分解成更小的功能单元是一个好习惯。虽然您可以在.each回调中内联cycle函数，但将其放在单独的泛型函数中允许重用。

$('.subtitles').each(function() {
    cycle($(this).find('h3.subtitle'));
});