我想做一个步进组件

Question

我想把prev btn和其他词藏起来

但是，当我按下prev按钮并显示finish btn时，我想逐一展示它们和finish btn。

按钮，prev，next和finish做的事情是不一样的，当我有finish按钮时，我想发布单词。

我试了很多次，但没有起作用。下面是我尝试过的代码：

​

function nextBtn() {
                var itemOne = document.getElementById("step-1");
                var itemTwo = document.getElementById("step-2");
                var itemThree = document.getElementById("step-3");
                var itemFour = document.getElementById("step-4");
                var prevBtn = document.getElementById("prevBtn");
                var nextBtn = document.getElementById("nextBtn");

                if (itemOne.style.display == "block" && itemTwo.style.display == "none" && prevBtn.style.display == "none") {  
                    itemOne.style.display = "none";
                    itemTwo.style.display = "block";
                    prevBtn.style.display = "block";
                }
                else {
                    console.log('Xatolik ishlamayapti');
                }
            }

#step-1 {
    display: block;
}
#step-2 {
    display: none;
}
#step-3 {
    display: none;
}
#step-4 {
    display: none;
}
#prevBtn {
    display: none;
}
#nextBtn {
    display: block;
}

        <div class="step-container">
            <div id="step-1">Hello</div>
            <div id="step-2">Hi</div>
            <div id="step-3">Salom</div>
            <div id="step-4">Molas</div>
            <button id="prevBtn" @click="prevBtn()">back</button>
            <button id="nextBtn" @click="nextBtn()">next</button>
        </div>

​

上面的链接有什么问题。

提前谢谢你。

Answer 1

您的方法的主要问题是，itemOne.style.display == "block"不会计算为true，因为它不考虑节点外部设置了一些css。

为步骤div使用html类将更有意义，这样您就可以一次使用querySelectorAll()来选择它们。

如果使用变量跟踪哪个数字步骤是当前步骤，则逻辑将更容易管理。

然后，每次单击前一个按钮或下一个按钮时，都可以增加和减少变量。

​

const allSteps = document.querySelectorAll('.step')
const totalSteps = allSteps.length
const prevButton = document.querySelector('#prevBtn')
const nextButton = document.querySelector('#nextBtn')
const finishButton = document.querySelector('#finishBtn')

// Hide everything except for #step-1
document
  .querySelectorAll(".step:not(#step-1)")
  .forEach(step => (step.style.display = "none"))

// Hide the prev button
prevButton.style.display = 'none'

// Hide the finish button
finishButton.style.display = 'none'

let currentStep = 1

function nextBtn() {
  currentStep++;
  refreshDisplay()
}

function prevBtn() {
  currentStep--;
  refreshDisplay()
}

function refreshDisplay() {
  // hide every step
  allSteps.forEach(step => (step.style.display = "none"))

  // show only the currentStep
  document.querySelector(`#step-${currentStep}`).style.display = 'block'

  // hide or show the prevButton
  if (currentStep === 1) {
    prevButton.style.display = 'none'
  } else {
    prevButton.style.display = 'inline-block'
  }

  // hide or show nextButton & finish button
  if (currentStep === totalSteps) {
    nextButton.style.display = 'none'
    finishButton.style.display = 'inline-block'
  } else {
    nextButton.style.display = 'inline-block'
    finishButton.style.display = 'none'
  }
}

function finish() {
  console.log('you are finished')
}

<div class="step-container">
  <div class="step" id="step-1">Hello</div>
  <div class="step" id="step-2">Hi</div>
  <div class="step" id="step-3">Salom</div>
  <div class="step" id="step-4">Molas</div>
  <button id="prevBtn" onclick="prevBtn()">back</button>
  <button id="nextBtn" onclick="nextBtn()">next</button>
  <button id="finishBtn" onclick="finish()">finish</button>
</div>

​

Answer 2

像这样吗？

​

var activeButton = 0;

function next() {
  document.getElementById(activeButton).classList.remove('active');
  activeButton++;
  document.getElementById(activeButton).classList.add('active');
}

function previous() {
  document.getElementById(activeButton).classList.remove('active');
  activeButton--;
  document.getElementById(activeButton).classList.add('active');
}

.step {
  display: none;
}

.active {
  display: inline;
}

<button id="0" class="active step">First</button>
<button id="1" class="step">Second</button>
<button id="2" class="step">Third</button>
<button id="3" class="step">Fourth</button>
<button id="4" class="step">Fifth</button>
<button id="5" class="step">Sixth</button>
<button id="6" class="step">Seventh</button>
<hr>
<button id="next" onclick="next()">Next</button>
<button id="next" onclick="previous()">Previous</button>

​