如何隐藏当前元素并在单击按钮时显示下一个?
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();
}
});
一般来说,你不应该为这样的事情使用 id
s,这只会带来更多的麻烦,而不是它的价值。相反,只需使用 类。一个简单的实现可能如下所示:
$('#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 在这些服务器上执行,并将呈现的页面发送回客户端。绝对是浪费时间!
如果用户能够一次简单地回答所有问题,然后发送完整的表格,他们一定会很感激。
我在手机上有一个 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();
}
});
一般来说,你不应该为这样的事情使用 id
s,这只会带来更多的麻烦,而不是它的价值。相反,只需使用 类。一个简单的实现可能如下所示:
$('#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 在这些服务器上执行,并将呈现的页面发送回客户端。绝对是浪费时间!
如果用户能够一次简单地回答所有问题,然后发送完整的表格,他们一定会很感激。