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