javascript - 使用纯 JavaScript 的步进器 - 之前的功能不起作用

Question

一旦超过最大步数(这是最后一步)如何使其返回 false，以前的函数一旦超过最大步数就不起作用，我尝试将当前步数设置为 -1 但仍然不起作用。

当超过最大步长时，我在控制台上收到此错误消息(TypeError:项目符号[当前]未定义)。

有人可以帮我解决这个问题吗？提前致谢。

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

const max=4;
let current=-1;

function next(){
	current+=1;
	if(!bullets[current]){
		return false; 
	}
	
	bullets[current].classList.add('hovered');
}

function previous(){
	bullets[current].classList.remove('hovered');
	current-=1;
	if(!bullets[current]){
		return false; 
	}
	
	bullets[current].classList.add('hovered');
}

.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:#3CB371;
}
.bullet{
	border:1px solid #3CB371;
	height:20px;
	width:20px;
	color:#3CB371;
	display:inline-block;
	transition:background-color 500ms;
	line-height:20px;
}
.bullet.hovered{
	color:#fff;
	background-color:#3CB371;
	bottom:10px;
}
.bullet.completed:after{
	content:'';
	position:absolute;
	bottom:80px;
	height:1px;
	width:calc(133% - 21px);
	background-color:#3CB371;
	margin-left:7px;  
}

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

Answer 1

此时您正在无条件增加/减少当前。即使您不尝试在 next 或 previous 的 this 调用中更改 classList，下一次单击按钮时，当前索引可能不存在。因此，在 previous 中，当您在函数开头执行 bullets[current].classList.remove('hovered'); 时，如果最后一个 current 超出了 bullets 集合的可能指示。

考虑使用 Math.max/Math.min 来确保 current 受限于可能的索引(或 -1 ，在没有任何内容应该突出显示的情况下):

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

let current = -1;

function next() {
  current = Math.min(current + 1, bullets.length - 1);
  bullets[current].classList.add('hovered');
}

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

.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: #3CB371;
}

.bullet {
  border: 1px solid #3CB371;
  height: 20px;
  width: 20px;
  color: #3CB371;
  display: inline-block;
  transition: background-color 500ms;
  line-height: 20px;
}

.bullet.hovered {
  color: #fff;
  background-color: #3CB371;
  bottom: 10px;
}

.bullet.completed:after {
  content: '';
  position: absolute;
  bottom: 80px;
  height: 1px;
  width: calc(133% - 21px);
  background-color: #3CB371;
  margin-left: 7px;
}

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