JavaScript - 如何显示下一个div并隐藏前一个div？ [英] JavaScript - How to show the next div and hide the previous one?
本文介绍了JavaScript - 如何显示下一个div并隐藏前一个div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个简单的测验，并想知道如何一次显示一个问题，但只能使用JavaScript。我不知道jQuery。基本上，我想第一个问题会自动显示。
以下是我的HTML看起来像的一个例子：
< div id =q0>
< li>
< h3> 1。天空的颜色是...< / h3>
< input type =radioname =question0value =A>绿色< br>
< input type =radioname =question0value =B>蓝色< br>
< input type =radioname =question0value =C>红色< br>
< input type =radioname =question0value =D> Purple< br>
< / li>
< / div>
< div id =q1style =visibility：hidden>
< li>
< h3> 2。纸张来自...< / h3>
< input type =radioname =question1value =A> Water< br>
< input type =radioname =question1value =B>水泥< br>
< input type =radioname =question1value =C>树木< br>
< input type =radioname =question1value =D>天空< br>
< / li>
< / div>
< div id =q2style =visibility：hidden>
< li>
< h3> 3。一天有几个小时？ < / H3>
< input type =radioname =question2value =A> 24< br>
< input type =radioname =question2value =B> 22< br>
< input type =radioname =question2value =C> 16< br>
< input type =radioname =question2value =D> 48< br>
< / li>
< / div>
我目前没有用于显示下一个div并隐藏前一个的脚本，因为我没有知道如何开始。
我希望将它放入此表单中...
function nextQ（）{
// code
}
...以及由此按钮调用它：
< button onclick =next ）>下一个问题< / button>
我对HTML和JavaScript真的很陌生，希望有任何帮助。
谢谢。
解决方案
纯粹的JavaScript版本（config）：
var showing = [1,0,0]; var questions = ['q0'，'q1'，'q2']; function next（）{var qElems = [ ]。 for（var i = 0; i< questions.length; i ++）{qElems.push（document.getElementById（questions [i]））; } for（var i = 0; i< shown.length; i ++）{if（showing [i] == 1）{qElems [i] .style.display ='none';显示[i] = 0; if（i == showing.length - 1）{qElems [0] .style.display ='block';显示[0] = 1; } else {qElems [i + 1] .style.display ='block';显示[i + 1] = 1; } break; }}}
< div id =questions> ;< div id =q0>< h3> 1。天空的颜色是...< / h3>< input type =radioname =question0value =A> Green< br>< input type =radioname =question0 value =B>蓝色< br>< input type =radioname =question0value =C>红色< br>< input type =radioname =question0value =D> Purple< br>< / div>< div id =q1style =display：none>< h3>纸来自...< / h3>< input type =radioname =question1value =A> Water< br>< input type =radioname =question1value = B> Cement< br>< input type =radioname =question1value =C> Trees< br>< input type =radioname =question1value =D > The Sky< br>< / div>< div id =q2style =display：none>< h3>一天有几个小时？ < / h3>< input type =radioname =question2value =A> 24< br>< input type =radioname =question2value =B> 22< ;< input type =radioname =question2value =C> 16< br>< input type =radioname =question2value =D> 48< br> ;< / DIV>< / DIV> < button onclick =next（）>下一个问题< / button>
$ b
纯JavaScript版本（无配置）：
function next（）{ var qElems = document.querySelectorAll（'＃questions> div'）; for（var i = 0; i
< div id =questions> ;< div id =q0>< h3> 1。天空的颜色是...< / h3>< input type =radioname =question0value =A> Green< br>< input type =radioname =question0 value =B>蓝色< br>< input type =radioname =question0value =C>红色< br>< input type =radioname =question0value =D> Purple< br>< / div>< div id =q1style =display：none;>< h3>纸来自...< / h3>< input type =radioname =question1value =A> Water< br>< input type =radioname =question1value = B> Cement< br>< input type =radioname =question1value =C> Trees< br>< input type =radioname =question1value =D > The Sky< br>< / div>< div id =q2style =display：none;>< h3>一天有几个小时？ < / h3>< input type =radioname =question2value =A> 24< br>< input type =radioname =question2value =B> 22< ;< input type =radioname =question2value =C> 16< br>< input type =radioname =question2value =D> 48< br> ;< / DIV>< / DIV> < button onclick =next（）>下一个问题< / button>
$ b
$（function（）{$（'。 '（this）.index（）; if（$（this）.is（'）'）。（'click'，function（）{$（'＃questions> div'）。 （'：visible'））{$（this）.hide（）; if（id == $（'＃questions> div'）。 ）.show（）;} else {$（'＃questions> div'）。eq（id + 1）.show（）;} return false;}}）;}）;}）;
< script src =https://ajax.googleapis.com/ajax/库/ jquery的/ 1.11.1 / jquery.min.js>< /脚本&克t;< div id =questions>< div id =q0>< h3>天空的颜色是...< / h3>< input type =radioname =question0value =A> Green< br>< input type =radioname =question0 value =B>蓝色< br>< input type =radioname =question0value =C>红色< br>< input type =radioname =question0value =D> Purple< br>< / div>< div id =q1style =display：none>< h3>纸来自...< / h3>< input type =radioname =question1value =A> Water< br>< input type =radioname =question1value = B> Cement< br>< input type =radioname =question1value =C> Trees< br>< input type =radioname =question1value =D > The Sky< br>< / div>< div id =q2style =display：none>< h3>一天有几个小时？ < / h3>< input type =radioname =question2value =A> 24< br>< input type =radioname =question2value =B> 22< ;< input type =radioname =question2value =C> 16< br>< input type =radioname =question2value =D> 48< br> ;< / DIV>< / DIV> < button class =next> Next Question< / button>
I am creating a simple quiz and would like to know how to show one question at a time but only using JavaScript. I do not know jQuery. Essentially, I would like the first question to be shown automatically.
Here is an example of what my HTML looks like:
<div id="q0">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1" style="visibility:hidden">
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2" style="visibility:hidden">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>
I currently don't have script for showing next div and hiding the previous one because I don't know how to even start.
I'm looking to have it put into this form...
function nextQ(){
// code
}
... and for it to be called by this button:
<button onclick="next()">Next Question</button>
I am really new to HTML and JavaScript and would appreciate any help.
Thanks.
解决方案
Pure JavaScript version (config):
var showing = [1, 0, 0];
var questions = ['q0', 'q1', 'q2'];
function next() {
var qElems = [];
for (var i = 0; i < questions.length; i++) {
qElems.push(document.getElementById(questions[i]));
}
for (var i = 0; i < showing.length; i++) {
if (showing[i] == 1) {
qElems[i].style.display = 'none';
showing[i] = 0;
if (i == showing.length - 1) {
qElems[0].style.display = 'block';
showing[0] = 1;
} else {
qElems[i + 1].style.display = 'block';
showing[i + 1] = 1;
}
break;
}
}
}
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button onclick="next()">Next Question</button>
Pure JavaScript version (no config):
function next() {
var qElems = document.querySelectorAll('#questions>div');
for (var i = 0; i < qElems.length; i++) {
if (qElems[i].style.display != 'none') {
qElems[i].style.display = 'none';
if (i == qElems.length - 1) {
qElems[0].style.display = 'block';
} else {
qElems[i + 1].style.display = 'block';
}
break;
}
}
}
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none;">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none;">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button onclick="next()">Next Question</button>
jQuery version:
$(function() {
$('.next').on('click', function() {
$('#questions>div').each(function() {
var id = $(this).index();
if ($(this).is(':visible')) {
$(this).hide();
if (id == $('#questions>div').length - 1) {
$('#questions>div').eq(0).show();
} else {
$('#questions>div').eq(id + 1).show();
}
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
<button class="next">Next Question</button>
这篇关于JavaScript - 如何显示下一个div并隐藏前一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
