单击锚点时隐藏和显示div的Javascript

Question

我似乎弄乱了一些非常简单的jQuery。我可以在div 1和2之间以及从2到3之间进行切换，但是当我达到3时，就不能返回。这一定是一个愚蠢的错误，但我看不到吗？

$('#show-form-stage-1').click(function(){
  $('#form-stage-1').show();
  $('#form-stage-2').hide();
  $('#form-stage-3').hide();
});
$('#show-form-stage-2').click(function(){
  $('#form-stage-1').hide();
  $('#form-stage-2').show();
  $('#form-stage-3').hide();
});
$('#show-form-stage-3').click(function(){
  $('#form-stage-1').hide();
  $('#form-stage-2').hide();
  $('#form-stage-3').show();
});

#form-stage-2,
#form-stage-3 {
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-stage-1">
  stage 1
  <br />
  <a href="#" id="show-form-stage-2">Next</a>
</div>
<div id="form-stage-2">
  stage 2
  <br />
  <a href="#" id="show-form-stage-1">Back</a>
  <a href="#" id="show-form-stage-3">Next</a>
</div>
<div id="form-stage-3">
  stage 3
  <br />
  <a href="#" id="show-form-stage-2">Back</a>
</div>

Answer 1

为每个元素提供唯一的ID。

$('#show-form-stage-1').click(function(){
    $('#form-stage-1').show();
    $('#form-stage-2').hide();
    $('#form-stage-3').hide();
});
$('#show-form-stage-2').click(function(){
    $('#form-stage-1').hide();
    $('#form-stage-2').show();
    $('#form-stage-3').hide();
});
$('#show-form-stage-3').click(function(){
    $('#form-stage-1').hide();
    $('#form-stage-2').hide();
    $('#form-stage-3').show();
});
$('#show-form-stage-4').click(function(){
    $('#form-stage-1').hide();
    $('#form-stage-2').show();
    $('#form-stage-3').hide();
});

#form-stage-2,
#form-stage-3 {
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-stage-1">
    stage 1
    <br />
    <a href="#" id="show-form-stage-2">Next</a>
</div>
<div id="form-stage-2">
    stage 2
    <br />
    <a href="#" id="show-form-stage-1">Back</a>
    <a href="#" id="show-form-stage-3">Next</a>
</div>
<div id="form-stage-3">
    stage 3
    <br />
    <a href="#" id="show-form-stage-4">Back</a>
</div>

Answer 2

属性id在文档中必须是唯一的。您已对多个元素使用相同的 id （ show-form-stage-2 ）。将其更改为 class ：

$('#show-form-stage-1').click(function(){
    $('#form-stage-1').show();
    $('#form-stage-2').hide();
    $('#form-stage-3').hide();
});
$('.show-form-stage-2').click(function(){
    $('#form-stage-1').hide();
    $('#form-stage-2').show();
    $('#form-stage-3').hide();
});
$('#show-form-stage-3').click(function(){
    $('#form-stage-1').hide();
    $('#form-stage-2').hide();
    $('#form-stage-3').show();
});

#form-stage-2,
#form-stage-3 {
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-stage-1">
    stage 1
    <br />
    <a href="#" class="show-form-stage-2">Next</a>
</div>
<div id="form-stage-2">
    stage 2
    <br />
    <a href="#" id="show-form-stage-1">Back</a>
    <a href="#" id="show-form-stage-3">Next</a>
</div>
<div id="form-stage-3">
    stage 3
    <br />
    <a href="#" class="show-form-stage-2">Back</a>
</div>

您还可以通过维护 class 来以更简化的方式实现相同目标：

$('div > a').click(function(){
  $('div').hide();
  if ($(this).is(".next"))
    $(this).parent().next().show();
  else{
    $(this).parent().prev().show();
    $(this).parent().next().hide();
  }
});

.form-stage{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    stage 1
    <br />
    <a href="#" class="next">Next</a>
</div>
<div class="form-stage">
    stage 2
    <br />
    <a href="#" class="back">Back</a>
    <a href="#" class="next">Next</a>
</div>
<div class="form-stage">
    stage 3
    <br />
    <a href="#" class="back">Back</a>
</div>