Question

我有一个页面网站，有3个表单，第一个forme有类活动，其余都隐藏了..所有表单都有相同类的按钮.all-pages。当我点击下一个按钮时，我想要第一页隐藏，secund得到激活，当我在第二个表单上点击SAME按钮NEXT我想要第二页让隐藏的类，第三页变得活跃。请帮我：）请只是JavaScript。

I have 3 forms like this.

＆＃13;

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

＆＃13;

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");

一旦你知道你正在使用什么形式，那么你可以根据需要隐藏其他形式

Answer 2

如果我理解你的问题，这是可能的解决方案。

const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');

nextButtons.forEach(btn => {
	btn.addEventListener('click', () => {
		pages.forEach(page => {
			page.hidden = true;
		});
		const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
		pageActive.hidden = false;
	})
})

<div class="page page-1">
	<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2"  hidden=true>
	<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3"  hidden=true>
	<button class="all-pages" data-page="1">NEXT 1</button>
</div>

在一个按钮点击事件3页

2 个答案: