Я хочу сделать шаговый компонент - PullRequest
Новая
       9

Я хочу сделать шаговый компонент

1 голос
/ 09 февраля 2020

Я хочу скрыть prev btn и другие слова

Но я хочу показать их и prev btn один за другим, когда я нажимаю кнопку next и отображаю 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>

Что не так по ссылке выше.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020

Как то так? 

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>
0 голосов
/ 09 февраля 2020

Основная проблема в вашем подходе состоит в том, что itemOne.style.display == "block" не будет оцениваться до true, поскольку не учитывает, что для узла установлен некоторый css, установленный извне.

Было бы более разумно использовать html классы для ваших шагов div, чтобы вы могли выбрать их все сразу с помощью querySelectorAll () .

Logi c будет проще в управлении, если вы будете использовать переменную для отслеживания того, какой шаг шага является текущим шагом.

Тогда вы можете просто увеличивать или уменьшать переменную каждый раз, когда нажимаете на предыдущую или следующую кнопку. 

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>
...