我想做一个步进组件

Question

我想隐藏 prev btn 和其他词

但是当我按下 next 按钮并显示 finish btn 我在最新消息时，我想一一显示它们和 prev btn。

按钮 prev、next 和 finish 做的事情与我有 finish 按钮时不一样我想 post单词。

我试了很多次都没有用。这是我试过的代码：

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>

上面有什么问题link。

提前致谢。

Answer 1

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

将 html 类用于步骤 div 会更有意义，这样您就可以 select 使用 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>

我想做一个步进组件

I want to make a stepper component

html

javascript

css

wizard

stepper