Question

我是jQuery的新手，我正在尝试使用jQuery构建一个简单的3步骤表单。我能够隐藏灰色标题，但我不能让它显示下一步。

JS：

$('.js-next-step').click(function(e) {
    e.preventDefault();

  // 1. Hide gray title
  $(this).parents().next().closest('.js-title-step').hide();

  // 2. Show next step div
  $(this).parents().next().closest('.js-step').show();

  // 3. Scroll to next step div
});

Answer 1

＆＃13;

$(document).ready(function() {
  
  $("#to1").on('click',function() {
    $("#step1").show();
    $("#step2").hide();
  });

  $("#to2").on('click',function() {
    console.log('to2');
    $("#step1").hide();
    $("#step2").show();
  });
  
});

＆＃13;

div {
  margin: 10px 0;
  padding: 5px;
  border: solid 1px silver;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="step1">
  <h3>Step 1</h3>
  <input type="button" value="Next" id="to2"/>
</div>

<div id="step2" style="display:none">
  <h3>Step 2</h3>
  <input type="button" value="Previous" id="to1"/>
</div>

＆＃13;

您可以简单地为每个元素分配唯一ID，并通过id访问它们，如下所示：

HTML：

<div id="step1">

</div>

JavaScript的：

$('#step1').show();

评论后有一个可能的答案：

＆＃13;

$(document).ready(function() {
  
  $("input[value=Next]").on('click',function(evt) {
    var $div = $(this).closest('div[id!="step"]');
    var $next = $div.next('div[id!="step"]');
    console.log('next', $div, $next);
    if ($next.length) {
      $div.hide();
      $next.show();
    } else {
      console.log('There is no next!!');
    }
  });
  
});

＆＃13;

div {
  margin: 10px 0;
  padding: 5px;
  border: solid 1px silver;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="step1">
  <h3>Step 1</h3>
  <input type="button" value="Next"/>
</div>

<div id="step2" style="display:none">
  <h3>Step 2</h3>
  <input type="button" value="Next"/>
</div>

<div id="step3" style="display:none">
  <h3>Step 3</h3>
  <input type="button" value="Next"/>
</div>

＆＃13;

Answer 2

你可以做这样的事情，这有点像关于引导程序的工作方式。

$('.js-next-step').click(function(e) {
    e.preventDefault();

    var nextStep = $(this).attr('data-next-step');

  $(nextStep).show();

});

基本上，你在元素上有一个数据属性，指向你想要显示的元素。

  <a class="btn btn-primary js-next-step" href="#" role="button" data-next-step='.step-2'>Continue to Step 2</a>

在点击逻辑中你也可以做一些隐藏当前步骤的事情。

Answer 3

＆＃13;

<script type="text/javascript">


$( document ).ready(function() {
$("#step1").show();
  $("#step2").hide();
  $("#step3").hide();
});

$('.js-next-step1').click(function(e) 
{
	alert("dfg");
  $("#step1").hide();
  $("#step2").show();
  e.preventDefault();
});

$('.js-next-step2').click(function(e) 
{
	e.preventDefault();

  $("#step1").hide();
  $("#step2").hide();
  $("#step3").show();
});
</script>

＆＃13;

<div class="container">



  <form>
<!-- begin Step 1 -->
<div id="step1">
<div class="row">
    <div class="col-md-6 here">
      <h2 class="color-black">Step 1</h2>
      <hr>
    </div>
 </div><!-- row -->
 
<div class="js-step-1">
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control js-show-panel-tip" placeholder="Email">
      </div>
    </div>
 </div><!-- row -->
  
 <div class="row">
   <div class="col-md-6 here">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control js-show-panel-tip" id="exampleInputPassword1" placeholder="Password">
      </div>
   </div>
 </div><!-- row -->
  
  <div class="row">
    <div class="col-md-12 text-center">
      <a class="btn btn-primary js-next-step1" href="#" role="button">Continue to Step 2</a>
    </div>
  </div><!-- row -->
  
</div>
</div>
<!-- end Step 1 -->


<!-- begin Step 2 -->
<div id="step2">
<div class="row js-title-step">
    <div class="col-md-6 here">
      <h2 class="color-gray">Step 2</h2>
      <hr>
    </div>
</div><!-- row -->

<div class="step-2 js-step">
 
 
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="firstName">First name</label>
        <input type="text" class="form-control" placeholder="First name">
      </div>
    </div>
 </div><!-- row -->
 
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="lastName">Last name</label>
        <input type="text" class="form-control" placeholder="Last name">
      </div>
    </div>
 </div><!-- row -->
 
  <div class="row">
    <div class="col-md-12 text-center">
      <a class="btn btn-primary js-next-step2" href="#" role="button">Continue to Step 3</a>
    </div>
  </div><!-- row -->
  
</div>
</div>
<!-- end Step 2 -->


<!-- begin Step 3 -->
<div id="step3">

<div class="step-3 js-step-3">
 <div class="row">
    <div class="col-md-6 here">
      <h2 class="color-black">Step 3</h2>
      <hr>
    </div>
 </div><!-- row -->
 
<div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="description">Description</label>
        <textarea class="form-control" rows="5"></textarea>
      </div>
    </div>
 </div><!-- row -->
 
 <div class="row">
    <div class="col-md-12 text-center">
      <a class="btn btn-success" href="#" role="button">Submit</a>
    </div>
  </div><!-- row -->

</div>
</div>
<!-- end Step 3 -->
  
  </form>
</div>

＆＃13;

jQuery - 简单的步骤形式

3 个答案: