Просматривайте вопросы, каждый раз скрывая предыдущий, используя 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 используется для создания уникального элемента. Вы можете использовать class для элементов того же типа.

Ваша вторая проблема - синтаксическая ошибка перед элементами тега a.

Так же вы можете сначала скрыть все элементы, используя атрибут class и покажите элемент spesifi c с атрибутом 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>