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

How to hide current element and show next on button click?

我在手机上有一个 JQuery 调查问卷网站。大多数网站用户使用 Opera Mini,目前 JQuery 手机动画还没有完全支持。

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

我该如何实现?

我目前有这样的东西:

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

});

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

非常感谢您的帮助。

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

您似乎将每个元素包装在 ID 为 "question" 的元素中,后跟问题编号。如果每个问题都遵循这个规则,我们可以声明一个变量并给它一个值(我们称这个变量为q)。要 select 当前问题,请使用 $("#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() 方法创建后退按钮购买,以便select 前一个元素。

$('#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();
    }
});

一般来说,你不应该为这样的事情使用 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>

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

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