我想跳过第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>

最佳答案

这是您要达到的目标吗?



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>

09-10 11:52
查看更多