每次使用jQuery点击隐藏前一个问题

Question

我有 5 个问题要点击查看。我一次只想要一个问题在页面上。每个问题下方都有返回和下一步按钮。但是我在第一个问题上工作的 jQuery，但在那之后失败了。我做错了什么？

HTML

<div id="one">
  <span>What is your first name?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="two">
  <span>What is your last name?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="three">
  <span>How old are you?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="four">
  <span>What is your favourite colour?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

jQuery

<script src="jquery.js"></script>
<script>  
  $(document).ready(function () {
    $("#two").hide();
    $("#three").hide();
    $("#four").hide();
    $("#next").click(function () {
      $("#one").hide();
      $("#two").show();
    });
  });
  $(document).ready(function () {
    $("#next").click(function () {
      $("#two").hide();
      $("#three").show();
    });
  });
</script>

Answer 1

你的第一个问题是你不能给你的元素同样的id。 id 用于使元素 uniqeu。您可以将class 用于相同类型的元素。

您的第二个问题是a 标签元素之前的语法错误。

您首先可以使用class 属性隐藏所有元素并使用id 属性显示特定元素。

$(document).ready(function () {
    $(".question").hide();
     $("#one").show();
   
  });
  function NextBack(id){
     $(".question").hide();
     $("#"+id).show();
  }
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
  <span>What is your first name?</span>
  <div>
   <a href="#"onclick="NextBack('four')" class="back">back</a>
   <a href="#"onclick="NextBack('two')" class="next">Next</a>
  </div>
</div>

<div id="two"class="question">
  <span>What is your last name?</span>
  <div>
   <a href="#"onclick="NextBack('one')" class="back">back</a>
   <a href="#"onclick="NextBack('three')" class="next">Next</a>
  </div>
</div>

<div id="three"class="question">
  <span>How old are you?</span>
  <div>
   <a href="#"onclick="NextBack('two')" class="back">back</a>
   <a href="#"onclick="NextBack('four')" class="next">Next</a>
  </div>
</div>

<div id="four"class="question">
  <span>What is your favourite colour?</span>
  <div>
  <a href="#" onclick="NextBack('three')" class="back">back</a>
  <a href="#" onclick="NextBack('one')" class="next">Next</a>
  </div>
</div>

或者你可以使用dom元素来隐藏和显示

 $(document).ready(function () {
    $(".question").hide();
     $("#one").show();
   
  });
$(".back").click(function(e) {
   var id=e.target.closest(".question").previousElementSibling.getAttribute("id");
   if(id){
     $(".question").hide();
     $("#"+id).show();
   }
    
});

$(".next").click(function(e) { 
   var id=e.target.closest(".question").nextElementSibling.getAttribute("id");
   if(id){
    $(".question").hide();
     $("#"+id).show();
   }  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
  <span>What is your first name?</span>
  <div>
   <a href="#" class="back">back</a>
   <a href="#" class="next">Next</a>
  </div>
</div>

<div id="two"class="question">
  <span>What is your last name?</span>
  <div>
   <a href="#"class="back">back</a>
   <a href="#"class="next">Next</a>
  </div>
</div>

<div id="three"class="question">
  <span>How old are you?</span>
  <div>
   <a href="#"class="back">back</a>
   <a href="#"class="next">Next</a>
  </div>
</div>

<div id="four"class="question">
  <span>What is your favourite colour?</span>
  <div>
  <a href="#" class="back">back</a>
  <a href="#" class="next">Next</a>
  </div>
</div>

Answer 2

主要问题是您有多个具有相同id 的元素，id 应该始终是唯一的。

还请注意，您忘记了链接前面的< (a)

你也可以像这样简单地实现它。

$(document).ready(function() {
  $(".questiontwo,.questionthree,.questionfour").hide();
  $(".next").click(function() {
    var current = $(this).closest("[class*=question]");
    var next = current.next("[class*=question]");
    if (next.length == 1){
      current.hide();
      next.show();
    }
  });
});

演示

$(document).ready(function() {
  $(".questiontwo,.questionthree,.questionfour").hide();
  $(".next").click(function() {
    var current = $(this).closest("[class*=question]");
    var next = current.next("[class*=question]");
    if (next.length == 1){
      current.hide();
      next.show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionone">
  <span>What is your first name?</span>
  <div>
    <a href="#" class="back">back</a>
    <a href="#" class="next">Next</a>
  </div>
</div>

<div class="questiontwo">
  <span>What is your last name?</span>
  <div>
    <a href="#" class="back">back</a>
    <a href="#" class="next">Next</a>
  </div>
</div>

<div class="questionthree">
  <span>How old are you?</span>
  <div>
    <a href="#" class="back">back</a>
    <a href="#" class="next">Next</a>
  </div>
</div>

<div class="questionfour">
  <span>What is your favourite colour?</span>
  <div>
    <a href="#" class="back">back</a>
    <a href="#" class="next">Next</a>
  </div>
</div>