Javascript 时间线-下一个和上一个事件

我正试图建立一个时间线，但当我点击其中一个圆圈时，我无法实现该功能。此时事件的绿色条已完成，或者如果我点击前一个圆圈，则“禁用”

我的代码

我尝试的

  <button id="toggleButton">Toggle</button>


var completes = document.querySelectorAll(".complete");
var toggleButton = document.getElementById("toggleButton");
function toggleComplete(){
  var lastComplete = completes[completes.length - 1];
  lastComplete.classList.toggle('complete');
}
toggleButton.onclick = toggleComplete;

切换
var completes=document.queryselectoral（“.complete”）；
var toggleButton=document.getElementById（“toggleButton”）；
函数toggleComplete（）{
var lastComplete=completes[completes.length-1]；
lastComplete.classList.toggle（'complete'）；
}
toggleButton.onclick=toggleComplete；

我试图用一个按钮来实现这一点，但没有成功。现在的目标是点击圆圈并完成“绿线”，直到那时。。。没有按钮。 有人能帮我吗？

---

谢谢

这就是onclick的调用方式：toggleButton.onclick=function（）{toggleComplete（）}； 以下是关于如何进行的参考：

---

请注意，实际上它只是从使用document.querySelectorAll（）方法检索的最后一个元素中切换（添加或删除）.complete类。

这就是调用onclick的方式：toggleButton.onclick=function（）{toggleComplete（）}； 以下是关于如何进行的参考：

---

请注意，实际上它只是从使用document.querySelectorAll（）方法检索的最后一个元素中切换（添加或删除）.complete类。

替换了.status:before和.status.circle以及.status元素中添加的.circle元素

var-lis=timeline.querySelectorAll（'#timeline>li'）；
lis.forEach（功能（li）{
var circle=li.querySelector（'.status.circle'）；
circle.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
var i=0；
如果（！li.classList.contains（'complete'））{
对于（i=0；i=0；i--）{
if（lis[i]==li）{
打破
}
lis[i].classList.remove（'complete'）；
}
}
});
});
。时间线{
列表样式类型：无；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
李先生{
过渡：所有200毫秒的速度都很慢；
}
.时间戳{
边缘底部：20px；
填充：0px 40px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字号：100；
}
.地位{
填充：0px 40px；
显示器：flex；
证明内容：中心；
边框顶部：2个实心#D6DCE0；
位置：相对位置；
过渡：所有200毫秒的速度都很慢；
}
.状况h4{
字号：600；
}
.状态.圆圈{
内容：''；
宽度：25px；
高度：25px；
背景色：白色；
边界半径：25px；
边框：1px实心#ddd；
位置：绝对位置；
顶部：-15px；
左：42%；
过渡：所有200毫秒的速度都很慢；
}
/*.状况：在{*/
/*内容：''*/
/*宽度：25px*/
/*高度：25px*/
/*背景色：白色*/
/*边界半径：25px*/
/*边框：1px实心#ddd*/
/*位置：绝对位置*/
/*顶部：-15px*/
/*左：42%*/
/*过渡：所有200毫秒的速度都很慢*/
/*}                               */
.李.完成.状态{
边框顶部：2个实心#66DC71；
}
.li.complete.status.circle{
背景色：#66DC71；
边界：无；
过渡：所有200毫秒的速度都很慢；
}                               
/*.li.完成。状态：在{*/
/*背景色：#66DC71*/
/*边界：无*/
/*过渡：所有200毫秒的速度都很慢*/
/*}                               */
.li.完成。状态h4{
颜色：#66DC71；
}
@介质（最小设备宽度：320px）和（最大设备宽度：700px）{
.时间表{
列表样式类型：无；
显示：块；
}
李先生{
过渡：所有200毫秒的速度都很慢；
显示器：flex；
宽度：继承；
}
.时间戳{
宽度：100px；
}
.状况：以前{
左-8%；
最高：30%；
过渡：所有200毫秒的速度都很慢；
}
}


测试1
11
试验


测试1
测试1
测试1


测试1
测试1
测试1


测试1
测试1
测试1

将.status:之前替换为.status.circle，并在.status元素中添加了.circle元素


var-lis=timeline.querySelectorAll（'#timeline>li'）；
lis.forEach（功能（li）{
var circle=li.querySelector（'.status.circle'）；
circle.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
var i=0；
如果（！li.classList.contains（'complete'））{
对于（i=0；i=0；i--）{
if（lis[i]==li）{
打破
}
lis[i].classList.remove（'complete'）；
}
}
});
});
。时间线{
列表样式类型：无；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
李先生{
过渡：所有200毫秒的速度都很慢；
}
.时间戳{
边缘底部：20px；
填充：0px 40px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字号：100；
}
.地位{
填充：0px 40px；
显示器：flex；
证明内容：中心；
边框顶部：2个实心#D6DCE0；
位置：相对位置；
过渡：所有200毫秒的速度都很慢；
}
.状况h4{
字号：600；
}
.状态.圆圈{
内容：''；
宽度：25px；
高度：25px；
背景色：白色；
边界半径：25px；
边框：1px实心#d