如何隐藏当前元素并在按钮单击时显示下一个？

Question

我在移动设备上有一个 JQuery 问卷调查网站。大部分网站用户使用Opera Mini，目前JQuery手机动画不完全支持。

然后我决定实现一个基于引导程序的网站，而不是 JQuery 移动版。这次我想实现一次出现一个问题，当用户想要转到下一个问题时，他们只需按下一步。

我该如何实现？

我目前有这样的事情：

$('#next').click(function(){
    $('#question1').hide();
    $('#question2').show();

});

但是我有 30 个奇怪的问题，那么，如何使用尽可能简单的代码来动态设置它？

非常感谢您的帮助。

Answer 1

一般来说，你不应该在这样的事情上使用ids，这只是麻烦多于它的价值。相反，只需使用类。一个简单的实现可能如下所示：

$('#next').click(function(){
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.next().addClass('active');
});

.question:not(.active){
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question active">Some question 1</div>
  <div class="question">Some question 2</div>
  <div class="question">Some question 3</div>
  <div class="question">Some question 4</div>
  <div class="question">Some question 5</div>
  <div class="question">Some question 6</div>
  <div class="question">Some question 7</div>
  <div class="question">Some question 8</div>
</div>
<button type="button" id="next">Next</button>

Answer 2

基本上，Opera Mini 中的每个 JavaScript 交互都需要往返 - 当用户点击“下一步”时，它的浏览器会向 Opera Mini 服务器发送一个点击事件。 JavaScript 在这些服务器上执行，并将呈现的页面发送回客户端。绝对是浪费时间！

如果用户能简单地一次回答所有问题，然后发送完整的表格，他们一定会很感激。

Answer 3

如果我们要像您在问题中给出的示例中那样使用 jQuery，则程序可能看起来类似于以下内容。

您似乎将每个元素包装在一个 ID 为“问题”的元素中，后跟问题编号。如果每个问题都遵循这个规则，我们可以声明一个变量并给它一个值（我们称这个变量为q）。要选择当前问题，请使用$("#question" + q)。每次点击#next按钮，隐藏当前问题，q加1，打开下一个。举个例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#">
  <div id="question1" class="questions">
    <input type="text" placeholder="Question 1">
  </div>
  <div id="question2" class="questions">
    <input type="text" placeholder="Question 2">
  </div>
  <div id="question3" class="questions">
    <input type="text" placeholder="Question 3">
  </div>
  <div id="question4" class="questions">
    <input type="text" placeholder="Question 4">
  </div>
  <div id="question5" class="questions">
    <input type="text" placeholder="Question 5">
  </div>
  <button id="next">Next</button>
</form>

<script>
  var q = 1

  $(document).ready(function() {
    $(".questions").hide();
    $("#question1").show();
  
    $("#next").click(function() {
    
      $("#question" + q).hide();
       q = q + 1;
      if(q > 5) {
        $("#next").remove();
        $("body").append("<input type='submit' value='Submit'>");
      } else {
        $("#question" + q).show();
      }
    });
  });
</script>

在这里，每次单击#next 按钮时，q 变量都会添加一个数字。如果所有 5 个问题均已通过，则会出现提交按钮，从而允许您提交答案。否则，将显示下一个问题。

如果您想添加任何动画，只需将 .hide() 和 .show() 替换为 .fadeIn()、.slideDown() 等即可。

编辑 - 后退按钮

如果我们使用类而不是像 @DelightedD0D 所做的那样使用 ID（因为它实际上更易于管理），您可以使用 .prev() 方法创建一个后退按钮购买以选择前一个元素。

$('#previous').click(function(){
    var $current = $('.question.active');
    $('.question').removeClass('active');
    $current.prev().addClass('active');
});

如果您使用的是 ID，它看起来像这样：

$("#previous").click(function() {
    if((q - 1) == 1) {
      $("#previous").hide();
    }
    $("#question" + q).hide();
    q = q - 1;
    $("#question" + q).show();

});

对脚本的其余部分进行以下修改：

$(".questions").hide();
$("#previous").hide();
$("#question1").show();

$("#next").click(function() {
    $("#question" + q).hide();
    q = q + 1;
    if(!$("#previous").is(":visible")) {
      $("#previous").show();
    }
    if(q > 5) {
      $("#next,#previous").remove();
      $("body").append("<input type='submit' value='Submit'>");
    } else {
      $("#question" + q).show();
    }
});