javascript - 使用纯 JavaScript 的步进器 - 突出显示特定步骤

Question

我想让它跳过步骤1和步骤2，直接跳转并突出显示步骤3。我尝试自己做，但我只突出显示了步骤3，但没有突出显示步骤1和2。我希望它只要我在我的javascript上更改它，就可以随机跳转到任何步骤。

可以这样做吗？下面是我的片段。您可以尝试运行一下看看结果。

预先感谢您提供的任何帮助!

const bullets = [...document.querySelectorAll('.bullet')];

let current = -1;

function next() {
	if(!bullets[current+1]){
		return false;
	}
	current = Math.min(current + 1, bullets.length - 1);
	bullets[current].classList.remove('unhovered');
	bullets[current].classList.add('hovered');
	if(bullets[current].classList.contains('uncompleted')){
		bullets[current].classList.remove('uncompleted');
		bullets[current].classList.add('completed');
	}
}

function previous() {
	if (bullets[current]) {
		bullets[current].classList.remove('hovered');
		bullets[current].classList.add('unhovered');
		if(bullets[current].classList.contains('completed')){
			bullets[current].classList.remove('completed');
			bullets[current].classList.add('uncompleted');
		}
	}
	current = Math.max(current - 1, -1);
}

function randomto2() {
	current = Math.min(current + 3, bullets.length - 1);
	bullets[current].classList.remove('unhovered');
	bullets[current].classList.add('hovered');
	bullets[current].classList.remove('uncompleted');
	bullets[current].classList.add('completed');
}

.progressbar{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:90%;
	margin:0 auto;
	margin-bottom:40px;
}
.item{
	text-align:center;
	width:20%;
	position:relative;
}
.text{
	height:50px;
	margin:10px 0px;
	color:#000;
}
.bullet{
	height:20px;
	width:20px;
	display:inline-block;
	transition:background-color 500ms;
	line-height:20px;
}
.bullet.hovered{
	color:#fff;
	background-color:#0c8a43;
	bottom:10px;
	border:1px solid #0c8a43;
}
.bullet.unhovered{
	color:#000;
	background-color:#fff;
	bottom:10px;
	border:1px solid #000;
}
.bullet.uncompleted:after{
	content:'';
	position:absolute;
	bottom:80px;
	height:1px;
	width:calc(133% - 21px);
	background-color:#53565A;
	margin-left:7px;  
}
.bullet.completed:after{
	content:'';
	position:absolute;
	bottom:80px;
	height:1px;
	width:calc(133% - 21px);
	background-color:#0c8a43;
	margin-left:7px;  
}

<div class="progressbar">
	<div class="item">
		<div class="bullet unhovered uncompleted">1</div>
		<div class="text">Hello Hello Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered uncompleted">2</div>
		<div class="text">Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered uncompleted">3</div>
		<div class="text">Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered">4</div>
		<div class="text">Hello</div>
	</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>
<div onclick="randomto2();">Random to 2</div>

Answer 1

这就是你想要实现的目标吗？

const bullets = [...document.querySelectorAll('.bullet')];

let current = -1;

function next(upto=0) {
	if(!bullets[current+1]){
		return false;
	}
	current = Math.min(current + 1, bullets.length - 1);
	bullets[current].classList.remove('unhovered');
	bullets[current].classList.add('hovered');
	if(bullets[current].classList.contains('uncompleted')){
		bullets[current].classList.remove('uncompleted');
		bullets[current].classList.add('completed');
	}
  if (upto > 0) {
    next(upto-1);
  }
}

function previous() {
	if (bullets[current]) {
		bullets[current].classList.remove('hovered');
		bullets[current].classList.add('unhovered');
		if(bullets[current].classList.contains('completed')){
			bullets[current].classList.remove('completed');
			bullets[current].classList.add('uncompleted');
		}
	}
	current = Math.max(current - 1, -1);
}

function randomto2() {
	someValue = Math.min(current + 3, bullets.length - 1);
  next(someValue);
}

.progressbar{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:90%;
	margin:0 auto;
	margin-bottom:40px;
}
.item{
	text-align:center;
	width:20%;
	position:relative;
}
.text{
	height:50px;
	margin:10px 0px;
	color:#000;
}
.bullet{
	height:20px;
	width:20px;
	display:inline-block;
	transition:background-color 500ms;
	line-height:20px;
}
.bullet.hovered{
	color:#fff;
	background-color:#0c8a43;
	bottom:10px;
	border:1px solid #0c8a43;
}
.bullet.unhovered{
	color:#000;
	background-color:#fff;
	bottom:10px;
	border:1px solid #000;
}
.bullet.uncompleted:after{
	content:'';
	position:absolute;
	bottom:80px;
	height:1px;
	width:calc(133% - 21px);
	background-color:#53565A;
	margin-left:7px;  
}
.bullet.completed:after{
	content:'';
	position:absolute;
	bottom:80px;
	height:1px;
	width:calc(133% - 21px);
	background-color:#0c8a43;
	margin-left:7px;  
}

<div class="progressbar">
	<div class="item">
		<div class="bullet unhovered uncompleted">1</div>
		<div class="text">Hello Hello Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered uncompleted">2</div>
		<div class="text">Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered uncompleted">3</div>
		<div class="text">Hello</div>
	</div>
	<div class="item">
		<div class="bullet unhovered">4</div>
		<div class="text">Hello</div>
	</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>
<div onclick="randomto2();">Random to 2</div>