Question

表格中有四个字段。

还有两个按钮，即接下来好了。下一步按钮是从一个字段跳到另一个字段。并且有一个ok按钮可以跳过所有字段，即它隐藏了我想要的div。

但我想要的是，当用户在第四个字段上，即最后一个字段，并且用户单击“下一个”按钮时，它应该隐藏div。

这是Demo

这是代码：

<main>
      <div class="welcome-form">
        <img src="img/form-bg.png" alt="" class="img-responsive bg-image">
        <div class="form-overlay">
          <div class="container">
            <div class="launching-div">
              <h1 class="orange-text">Boom!</h1>
              <p>That’s all we needed from you to get started hold on tight.....</p>
            </div>
            <div class="form-inner">
              <h1>Welcome to Shoprocket</h1>
              <p>If your new to shoprocket we need to ask you <span class="orange-text">4 simple questions</span> to help us optimise your account. If your a regular feel free to skip this bit, you know the drill...</p>
              <form method="post">
                <div class="form-step-wrapper">
                  <hr>
                  <div class="form-step">
                    <div class="active"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                </div>

                <div class="form-main">

                  <ul style="display: block;" class="form-content">
                    <li>
                      <h2><span class="orange-text">1.</span> tell us your email</h2>
                    </li>
                    <li class="form-group">
                      <input type="text" name="email" placeholder="Type it in here" data-required="true" data-email="true" class="form-control">
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">2.</span>what are you selling?</h2></li>
                    <li class="form-group">
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">3.</span>how will you fulfill orders?</h2></li>
                    <li class="form-group" >
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">4.</span>where is your collection from?</h2></li>
                    <li class="form-group" >
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                </div>

                <div class="form-navigation">
                  <span id="sf-msg" class="sf-msg-error"></span>
                  <button id="sf-prev" class="sf-button" type="button" style="display: none">Previous</button>
                  <button id="sf-next" class="sf-button" type="button">next</button>
                  <button id="sf-ok" type="button" class="sf-button">ok</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

这是我用来隐藏div的js代码

$(document).ready(function() {
    $("#sf-ok").click(function(e) {
        $(".form-inner").hide();
    $(".launching-div").show();
});

请帮帮我。

Answer 1

这是您想要的方式。在jquery代码中使用以下内容。

if(t.active == 3){
    $(".form-inner").hide();
    $(".launching-div").show();
 }

检查Fiddle Here.

Answer 2

最好做很多代码，你可以简单地使用

http://www.jquery-steps.com/Examples

如何在特定情况下单击按钮隐藏div

2 个答案: