Javascript 如何让jQuery在多组文本之间循环？

首先，我对javascript了解不多，一直依靠谷歌帮助我度过难关。我正在设计一个元素，其中有几个标题和副标题需要同步循环（所以标题1和副标题1一起）

我找到了这个密码笔（）

这对标题或副标题都适用，但不是两者都适用。我对它的所有摆弄要么破坏了脚本，要么导致动画混淆了标题和副标题。我需要使用divs，因为实际文本是从文本文件中提取的

当我最初发布这个问题时，我得到的回应是我应该发布我的代码。然而，这是一个更长的页面的一部分。因此，我创建了自己的代码笔，其中只包含我们正在查看的元素和一些格式

我的钢笔可以在

---

为了澄清，我需要让标题像副标题一样循环

1st：您需要将下一个代码添加到css中，以隐藏默认情况下的所有div

var divs = $('div[id^="content-"]').hide(),
  i = 0;
(function cycle() {
  divs
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();
var divs1 = $('div[id^="subtitle-"]').hide(),
  i = 0;
(function cycle() {
  divs1
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, cycle);
  i = ++i % divs1.length;
})();

div[id^="subtitle-"] , div[id^="content-"]{
  display : none;
}

第二：您需要将

循环作为一个函数。。两个函数都有足够的一个函数。。将
元素，i
作为这样的参数传递
elements
用于元素，而
i
用于需要开始的元素的索引。。在您的情况下，使用
0
从第一个元素开始

function cycle(el , i) {
  //alert(i);
  el
    .hide()
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, function(){
      i = ++i % el.length;
      cycle(el , i);
    });
}

现在，您可以在文档准备就绪时运行该函数

$(document).ready(function(){
  var divs = $('div[id^="subtitle-"]');
  cycle(divs , 0);
  var titles = $('div[id^="content-"]');
  cycle(titles , 0);
});


$（文档）.ready（函数（）{
var divs=$（'div[id^=“subtitle-”）；
循环（divs，0）；
变量标题=$（'div[id^=“content-”）；
循环（标题，0）；
});
功能循环（el，i）{
//警报（一）；
埃尔
.hide（）
.eq（i）
.fadeIn（400）
.延迟（5000）
.fadeOut（400，函数（）{
i=+i%el.长度；
周期（el，i）；
});
}
@导入url（“https://fonts.googleapis.com/css?family=Annie+使用你的望远镜）；
html，
身体{
保证金：0；
填充：0；
文本对齐：居中；
字体家族：“安妮用你的望远镜”，草书；
字号：700；
}
.机顶盒{宽度：500px；
高度：62px；
保证金：0自动；
溢出：隐藏；
}
.盒子{
框大小：边框框；
边框样式：虚线；
边框宽度：4px；
边框颜色：#cf3d6a；
宽度：400px；
保证金：0自动；
填充：10px；
}
.标题{
文本对齐：居中；
字体大小：42px；
颜色：白色；
文本阴影：1px 1px 1px rgba（0,0,0,0.8），
1px 1px 2px rgba（0,0,0,0.8），
1px 1px 3px rgba（0,0,0,0.8），
1×1×4×rgba（0,0,0,0.8）；
溢出：
}
.副标题{
文本对齐：居中；
文本对齐：居中；
字号：28px；
颜色：白色；
文本阴影：1px 1px 1px rgba（0,0,0,0.8），1px 1px 2px rgba（0,0,0,0.8），
1px 1px 3px rgba（0,0,0,0.8），1px 1px 4px rgba（0,0,0,0.8）；
}
div[id^=“subtitle-”]，div[id^=“content-”]{
显示：无；
}

测试标题#1
测试标题#2
测试标题#3
测试标题#4
测试子目#1
测试子目#2
测试子目#3
测试子目#4
（所以标题1和副标题1一起出现）。代码中涉及标题和副标题的部分在哪里？请提供您的代码并解释哪些代码不适合您我已编辑了问题，以清晰起见，并添加了一个codepen链接，将我正在处理的内容放到上下文中。请阅读“”指南：我们希望您的问题中包含您的（相关）代码，否则您的代码可能，被移除或无法访问。非常感谢。它工作得很好，我能看出哪里出了问题。
$(document).ready(function(){
  var divs = $('div[id^="subtitle-"]');
  cycle(divs , 0);
  var titles = $('div[id^="content-"]');
  cycle(titles , 0);
});