在 JS 中循环遍历多个相同的标记块并执行相同的功能而不会受到干扰

Question

我希望淡入/淡出文本标签，其中给定块中一次只显示一个标签。标记是这样的：

 <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]

我可以循环遍历一组 javascript:

 var divs = $('.subtitles').find('h3.subtitle');
  divs.hide();
      i = 0;

  //    fade h3s in / out
  (function cycle() {
    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);

    i = ++i % 3;
  })();

但是页面上的块多了，事情就变得混乱了。我如何遍历多个块并应用相同的行为？

Answer 1

尝试.each()

代码： $('.subtitles').each(function() {$(this).find('h3.subtitle');$(this).hide()});

编辑：根据问题 OP，i 变量变得复杂，原因是 javascript 提升。请阅读此 link，了解

发生了什么

Answer 2

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

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'));
});

在 JS 中循环遍历多个相同的标记块并执行相同的功能而不会受到干扰

Loop through multiple of same blocks of markup in JS and perform same function without interference

html

javascript

jquery

underscore.js