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

Question

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

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

我该如何实现？

我目前有这样的东西：

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

});

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

非常感谢您的帮助。

Answer 1

如果我们要像您在问题中给出的示例中那样使用 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();
    }
});

Answer 2

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

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

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

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

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

html

mobile

jquery

opera-mini

twitter-bootstrap

编辑 - 后退按钮