如何仅在第一页（div）上隐藏“上一个”按钮并在最后一页（div）上隐藏“下一个按钮”

Question

我有一个多步骤（多页？）表单，只要用户按下“下一个”或“上一个”按钮，就会通过 div 显示和隐藏表单字段。

我只想禁用第一个 div (div id="page1" class="pageform") 上的“上一个”按钮，因为它不需要，反之亦然，最后一个 div 上的“下一个”按钮 (div id=" page16" class="pageform")

我不太确定如何解决这个问题，因为我对 JS 还很陌生，我使用了一个教程来帮助我弄清楚如何使用 JQuery 显示和隐藏 div。

<!-- PAGE 1 -->

<div id="page1" class="pageform">

      <div class="radio">

      <label for="AmountNeeded" style="display: none;">How much do you need?</label>

      <label><input type="radio" name="AmountNeeded" value="500" required>$100 - $500</label><br>

  </div>

  <div class="radio">

    <label><input class="optradio" type="radio" name="AmountNeeded" value="1000" checked>$500 - $1000</label><br>

  </div>

  <div class="radio">

    <label><input class="optradio" type="radio" name="AmountNeeded" value="2000">$1500 - $2000</label><br>

  </div>

  <div class="radio">

    <label><input class="optradio" type="radio" name="AmountNeeded" value="2500">$2500 or more</label><br>

  </div>

</div>

<!---PAGE 2 -->

<div id="page2" class="pageform">

  <div class="row">

    <div class="col-sm-6">

      <div class="form-group">

        <label for="Firstname">First name</label><br>

        <input name="Firstname" class="form-control" type="text" value="Bob" required />

      </div>

    </div>

    <div class="col-sm-6">

      <div class="form-group">

        <label for="Lastname">Last name</label><br>

        <input name="Lastname" class="form-control" type="text" value="" required />

      </div>

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12">

      <div class="form-group">

        <label for="Email">Email Address</label><br>

        <input name="Email" class="form-control" type="email" value="[e-mail]" required />

      </div>

    </div>

  </div>

  <div class="row">

    <div class="col-sm-4">

      <div class="form-group">

        <label for="HomePhone">Home Phone</label><br>

        <input type="tel" class="form-control" name="HomePhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 123-456-7890" required>

      </div>

    </div>

Answer 1

当visibleDiv第一次隐藏后退按钮时显示它，当visibleDiv最后一次隐藏下一个按钮时显示它function showDiv() {&nbsp; &nbsp; $(".pageform").hide();&nbsp; &nbsp; $(".pageform:eq(" + visibleDiv + ")").show();&nbsp; &nbsp; if(visibleDiv == 1 ) { // 1 or first visible div number&nbsp; &nbsp; &nbsp; &nbsp; $("#backbutton").hide();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("#backbutton").show();&nbsp; &nbsp; }&nbsp; &nbsp; if(visibleDiv == 2 ) { // 2 or last visible div number&nbsp; &nbsp; &nbsp; &nbsp; $("#nextbutton").hide();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("#nextbutton").show();&nbsp; &nbsp; }}