Javascript 当不同跨度的类处于活动状态时，更改跨度的内容

我不确定这个问题以前是否有人回答过。我花了几个小时寻找这个，但没有运气

不管怎么说，我基本上想做的是，当另一个（我们称之为main）span的类处于活动状态时，更改几个span的内容。想象一下这样的情景：

<div class="arrow-left" id="prev"></div>
<span class="headline-p active" id="trail1">Trail 1</span>
<span class="headline-p" id="trail2">Trial 2</span>
<span class="headline-p" id="trail3">Trial 3</span>
<a class="arrow-right" id="next"></a>

<h3>Result <span id="result">1</span></h3>
<p>Test 1 = <span id="test1">1</span></p>
<p>Test 2 = <span id="test2">1</span></p>
<p>Test 3 = <span id="test3">1</span></p>
<h3>Gener result = <span id="g-result">10%</span></h3>

线索1
试验2
试验3
结果1
测试1=1

测试2=1

测试3=1

一般结果=10%

因此，单击“下一步”后，轨迹1将更改为轨迹2，跨度中的所有值（结果、测试和g-result）也随之更改。当Trail 2激活时，结果1变为结果2，测试显示不同的值

我的基本想法是让班级在小径上进行积极的改变。但是我对jquery/js不是很在行，所以如果有人有更好的想法，我会很乐意听

还有一件事，上面的代码是我所拥有的代码的简化版本。我想得到只是工作演示玩

提前感谢您的帮助！我真的很感激任何提示或小提琴

---

抱歉，有任何错误，这是我的第一篇文章，我不是英语母语。

您可以考虑下面的代码，这会将活动类循环到下一个位置，并在最后一个位置时返回到第一个位置

运行下面的代码，希望对您有所帮助：

//等待DOM的加载
$（文档）.ready（函数（）{
var id=null；
var aux=null；
//正在注册click事件及其对“下一个”调用方的回调
$（'#next'）。在（'单击'，函数（）上）{
//获取实际有效跨度
aux=$（'.headline-p.active'）.attr（'id'）.split（'trail'）；
//位置
id=aux[1]；
//一些控制台调试
//控制台信息（“实际位置：”+id）；
//log（'DOM节点数：'+$（'.headline-p'）.length）；
//删除活动类
$（'.headline-p:eq（+（id-1）+'））.removeClass（'active'）；
//如果你在最后一个位置，它会变为第一个位置
如果（id=$（'.headline-p'）。长度）{
$（'.headline-p:eq（0）'）.addClass（'active'）；
//跳到下一个
}否则{
$（'.headline-p:eq（'+id+'））.addClass（'active'）；
}
});
});
.active{
颜色：红色；
}

上


线索1
试验2
试验3



下一个
结果1
测试1=1

测试2=1

测试3=1

genr result=10%
在我的手机上会阻止我写代码，但我昨晚为一个个人项目做了同样的逻辑

1） 在每个要显示的结果上使用相同的类（就像headline-p一样），并向要显示的结果添加活动类

2） 将计数器初始化为0，单击“下一步/上一步”时递增/递减该计数器

3） 隐藏每个轨迹和结果而不激活类，第一个轨迹和结果应可见

4）获取每个跟踪和结果的列表，如
var trails=$（.trails）

5）单击next/prev后，删除trails和res上的活动类，如下面所示
$（.trails）[i-1]。removeClass（'active）
（i-1，如果您已经增加了计数器，如果您之前这样做的话，则为i）

6）然后将活动类添加到当前trails和results元素
$（.trails）[i].addClass（“活动”）
（i+1，如果您将计数器放在后面）
如果您希望在没有任何库的情况下实现：

想法很简单：


单击
headline-p
，需要更新
span
在
next
或
prev
上，将
位置设置为
+1
或
-1
，然后移动到该索引。为了保持流的一致性，可以直接调用此元素的click


此外，我还使用了
Array.from
，它是ES6的一部分。如果您希望支持旧浏览器，请使用
[].prototype.slice.call
从HTMLCollection获取数组


函数寄存器事件（）{
var span=document.querySelectorAll（'span[id^=trail]'）；
对于（变量i=0；i

.active{
颜色：蓝色
}
prev
线索1
试验2
试验3
下一个
结果1
测试1=1

测试2=1

测试3=1

Gener result=10%
您正在搜索类似的功能吗