Question

我在移动设备上有一个JQuery问卷调查网站。大多数网站用户使用Opera Mini，并且不完全支持当前的JQuery移动动画。

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

我该如何实现？

我目前有这样的事情：

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

});

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

非常感谢您的帮助。

Answer 1

一般来说，你不应该使用id来做这样的事情，这比它的价值更麻烦。相反，只需使用类。一个简单的实现可能如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

Answer 3

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

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

<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()等等。

编辑 - 后退按钮

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

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

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

3 个答案:

编辑 - 后退按钮