javascript - 三页的一键点击事件

Question

我有一页网站，包含三种表单。第一种形式具有活跃类，其余形式是隐藏的。所有表单都有具有相同类 .all-pages 的按钮。当我单击“下一步”按钮时，我希望第一页隐藏类，第二页处于事件状态。当我在第二个表单上时，单击“相同”按钮“下一步”，我希望第二页隐藏类，而第三页处于事件状态。请帮我 :)请只使用 JavaScript。

我有 3 个这样的表格:

<div class="container-fluid"> <!-- first page container -->
    <div class="row">
      <div class="col-lg-5 col-lg-offset-3">
        <form class="well margin-form-top form-color-bg page1">

          <div class="row"> <!-- webpage name -->
            <div class="col-lg-4 col-lg-offset-4">
              <h2>Book a Room</h2>
            </div>
          </div>

          <div class="row"> <!-- information about webpage -->
            <div class="col-lg-7 col-lg-offset-2 h4">
              <p>This information will let us know more about you.</p>
            </div>
          </div>
          
          <div class="row"> <!-- navigation -->
            <div class="col-lg-12 button-padding-zero">
              <ul class="nav nav-pills nav-justified btn-group">
                <button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
                  <b>ACCOUT</b>
                </button>
                <button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
                  <b>ROOM TYPE</b>
                </button>
                <button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
                  <b>EXTRA DETAILS</b>
                </button>
              </ul>
            </div>
          </div>
          <br>

          <div class="row"> <!-- let's start -->
            <div class="col-lg-5 col-lg-offset-4 h4">
              <p>Let's start with the basic details.</p>
            </div>
          </div>
          <br>
          <div class="row"> <!-- first row email and country -->
            <div class="col-lg-5 col-lg-offset-0">
              <div class="input-group">
              <input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
              </div>
            </div>

            <div class="col-lg-6 col-lg-offset-1 button-padding-zero">
              <select class="form-control input-sm btn input-width">
                <option value="" selected>Country</option>
                <option>Serbia</option>
                <option>Russia</option>
                <option>Brazil</option>
              </select>
            </div>
          </div>
          <br>
          <div class="row"> <!-- 2nd row password and budget -->
            <div class="col-lg-5 col-lg-offset-0">
              <div class="input-group">
              <input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
              </div>
            </div>

            <div class="col-lg-6 col-lg-offset-1 button-padding-zero">
              <select class="form-control input-sm btn input-width">
                <option value="" selected>Daily Budget</option>
                <option>100$</option>
                <option>200$</option>
                <option>300$</option>
              </select>
            </div>
          </div>
          <br>
          <br>
          <br>
          <div class="row">
           <div class="col-lg-3 col-lg-offset-9">
             <button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
           </div> 
          </div>
            
          </div>

        </form>
      </div>
    </div>
  </div>

var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
  function nextFunction(event) {
    // debugger;
    var allButtons = document.querySelectorAll('.all-pages');
    for (var i = 0; i < allButtons.length; i++) {
      var oneButton = allButtons[i].dataset.page;
      if (allButtons[i].dataset.page === '0') {
        page1.classList.add('hidden');
        page2.classList.remove('hidden');
        return;
        debugger;
      } else {
        page2.classList.add('hidden');
        page3.classList.remove('hidden');
        }
      }
        
    }
   
for (var nextButton of nextButtons){
    nextButton.addEventListener('click', nextFunction);
}

Answer 1

您可以使用按钮的属性data-page来跟踪您当前所在的表单，然后显示相应的表单。

// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");

一旦您知道自己所在的表单，就可以根据需要隐藏其他表单