Javascript 如何从div数组中获取下一个对象？
我正试着循环浏览一个Div的列表，里面有我所有的琐事问题。我知道如何使用迭代器循环遍历所有的Div，但我只想知道如何获取一个Div，运行一些代码，然后在用户单击submit后循环到数组中的下一个对象，然后运行相同的代码等。我还隐藏了每个Div，以便他们在完成前一个问题之前一次只能看到一个Div。我对Java脚本非常陌生，并且正在尽可能快地学习，任何提示都将不胜感激Javascript 如何从div数组中获取下一个对象？,javascript,arrays,Javascript,Arrays,我正试着循环浏览一个Div的列表，里面有我所有的琐事问题。我知道如何使用迭代器循环遍历所有的Div，但我只想知道如何获取一个Div，运行一些代码，然后在用户单击submit后循环到数组中的下一个对象，然后运行相同的代码等。我还隐藏了每个Div，以便他们在完成前一个问题之前一次只能看到一个Div。我对Java脚本非常陌生，并且正在尽可能快地学习，任何提示都将不胜感激 <div class="row"> <div class="col-12 questio
<div class="row">
<div class="col-12 questions">
<form name="quiz" onsubmit="return false">
<div class="q1">
<h1>The 'Mountain' is the nickname for which character?</h1>
<input type="radio" name="q" value="wrong" id="q1a">a. Gerold Clegane
<br>
<input type="radio" name="q" value="wrong" id="q1b">b. Sandor clegane
<br>
<input type="radio" name="q" value="wrong" id="q1c">c. Oberyn Martell
<br>
<input type="radio" name="q" value="correct" id="q1d">d. Gregor Clegane
<br>
<button class="submit" type="submit">Submit</button>
</div>
<div class="q2">
<h2>Who is the youngest child of Lord Tywin Lannister?</h2>
<input type="radio" name="q" value="correct" id="q2a">a. Tyrion Lannister
<br>
<input type="radio" name="q" value="wrong" id="q2b">b. Jaime Lannister
<br>
<input type="radio" name="q" value="wrong" id="q2c">c. Cersei Lannister
<br>
<input type="radio" name="q" value="wrong" id="q2d">d. Jon Snow
<br>
<button class="submit" type="submit">Submit</button>
</div>
<div class="q3">
<h3>Who is the King of the North?</h3>
<input type="radio" name="q" value="wrong" id="q3a">a. Bran Stark
<br>
<input type="radio" name="q" value="correct" id="q3b">b. Jon Snow
<br>
<input type="radio" name="q" value="wrong" id="q3c">c. Tommen Baratheon
<br>
<input type="radio" name="q" value="wrong" id="q3d">d. LittleFinger
<br>
<button class="submit" type="submit">Submit</button>
</div>
<div class="q4">
<h4>Who is the head of house Stark?</h4>
<input type="radio" name="q" value="wrong" id="q4a">a. Tyrion Lannister
<br>
<input type="radio" name="q" value="wrong" id="q4b">b. Jon Snow
<br>
<input type="radio" name="q" value="wrong" id="q4c">c. Bran Stark
<br>
<input type="radio" name="q" value="correct" id="q4d">d. Ned Stark
<br>
<button class="submit" type="submit">Submit</button>
</div>
<div class="q5">
<h5>Which persons are the 'Night's Watch' trying to stop by using a giant wall of ice?</h5>
<input type="radio" name="q" value="correct" id="q5a">a. White Walkers
<br>
<input type="radio" name="q" value="wrong" id="q5b">b. Wildings
<br>
<input type="radio" name="q" value="wrong" id="q5c">c. Mother of Dragons
<br>
<input type="radio" name="q" value="wrong" id="q5d">d. Night walkers
<br>
<button class="submit" type="submit">Submit</button>
</div>
</form>
“山”是哪个角色的昵称？
A.格罗德·克莱甘
B桑多克莱甘
C奥伯林·马特尔
D格雷戈克莱甘
提交
泰温·兰尼斯特勋爵最小的孩子是谁？
A.兰尼斯特
B詹姆·兰尼斯特
C瑟曦·兰尼斯特
D乔恩斯诺
提交
谁是北方的国王？
A.布兰·史塔克
B乔恩斯诺
C托曼·拜拉席恩
D小芬格
提交
谁是斯塔克家族的首领？
A.兰尼斯特
B乔恩斯诺
C布兰·史塔克
D奈德·史塔克
提交
“守夜人”试图用一堵巨大的冰墙阻止哪些人？
A.白色步行者
B野生动物
C龙之母
D夜行者
提交
$(document).ready(function () {
console.log("ready!");
var question1 = $('.q1');
var question2 = $('.q2');
var question3 = $('.q3');
var question4 = $('.q4');
var question5 = $('.q5');
var correctAnswers = 0;
var wrongAnswers = 0;
var gameArr = [question1, question2, question3, question4, question5];
function nextGame() {
for (i=0;i<gameArr.length;i++){
//i dont want it to grab every object all at the same time
}
}
nextGame();
console.log(nextGame());
//My startGame button
$('.b1').on("click", function () {
console.log(gameArr[0]);
gameArr[0].show();
});
//Setting up audio for the start screen, make it loop so it never stops running
var audio1 = new Audio("assets/music/startMusic.mp3");
audio1.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
audio1.play();
//code to make my quiz responsive
function game() {
var answer = $("input[name='q']:checked").val();
if (answer === "correct") {
alert("Correct!");
correctAnswers = correctAnswers + 1
} else {
wrongAnswers = wrongAnswers + 1
alert("Wrong!");
}
}
//timer
function countdown() {
seconds = 60;
$('#timer').html('<h6>Time Remaining: ' + seconds + '</h6>');
time = setInterval(showCountdown, 1000);
}
function showCountdown() {
seconds--;
$('#timer').html('<h3>Time Remaining: ' + seconds + '</h3>');
if (seconds < 1) {
clearInterval(time);
}
}
//submit your answer
$('.submit').on("click", function () {
//nextGame();
game();
console.log(gameArr);
});
$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
变量问题1=$（'.q1'）；
变量问题2=$（'.q2'）；
变量问题3=$（'.q3'）；
变量问题4=$（'.q4'）；
变量问题5=$（'.q5'）；
var=0；
var=0；
var gameArr=[问题1、问题2、问题3、问题4、问题5]；
函数nextGame（）{
对于（i=0；i你必须记住最后一个位置
所以你有一个变量，叫它lastGame或者其他什么。这将是一个与correctAnswers
等相同级别的变量。从零开始
每当你想导航到下一个关卡时，增加这个值并执行gameArr[lastGame].show（）；
例如：
var correctAnswers = 0;
var wrongAnswers = 0;
var gameArr = [question1, question2, question3, question4, question5];
var lastGame = 0;
function nextGame() {
gameArr[lastGame].show();
lastGame++;
}
在超时时调用nextGame（）
必须记住最后一个位置
所以你有一个变量，叫它lastGame或者其他什么。这将是一个与correctAnswers
等相同级别的变量。从零开始
每当你想导航到下一个关卡时，增加这个值并执行gameArr[lastGame].show（）；
例如：
var correctAnswers = 0;
var wrongAnswers = 0;
var gameArr = [question1, question2, question3, question4, question5];
var lastGame = 0;
function nextGame() {
gameArr[lastGame].show();
lastGame++;
}
在超时时，调用nextGame（）
使全局迭代器在用户每次点击答案时增加其值，隐藏旧div并显示新div
像这样的
var question1 = $('.q1');
var question2 = $('.q2');
var question3 = $('.q3');
var question4 = $('.q4');
var question5 = $('.q5');
var correctAnswers = 0;
var wrongAnswers = 0;
var currentIndex = 0;
var gameArr = [question1, question2, question3, question4, question5];
然后在提交表格之后
$('.submit').on("click", function () {
//nextGame();
game();
if(currentIndex < (gameArr.length -1 ))
{
// I am using the hide callback which is fired by jQUery after the object is completely hidden
gameArr[currentIndex].hide(function(){
currentIndex++;
gameArr[currentIndex].show();
});
}
});
$（'.submit'）。在（“单击”，函数（）{
//nextGame（）；
游戏（）；
如果（当前索引<（游戏玩家长度-1））
{
//我使用的是隐藏回调，它是在对象完全隐藏后由jQUery触发的
gameArr[currentIndex].hide（函数（）{
currentIndex++；
gameArr[currentIndex].show（）；
});
}
});
使全局迭代器在用户每次点击答案时增加其值，隐藏旧div显示新div
像这样的
var question1 = $('.q1');
var question2 = $('.q2');
var question3 = $('.q3');
var question4 = $('.q4');
var question5 = $('.q5');
var correctAnswers = 0;
var wrongAnswers = 0;
var currentIndex = 0;
var gameArr = [question1, question2, question3, question4, question5];
然后在提交表格之后
$('.submit').on("click", function () {
//nextGame();
game();
if(currentIndex < (gameArr.length -1 ))
{
// I am using the hide callback which is fired by jQUery after the object is completely hidden
gameArr[currentIndex].hide(function(){
currentIndex++;
gameArr[currentIndex].show();
});
}
});
$（'.submit'）。在（“单击”，函数（）{
//nextGame（）；
游戏（）；
如果（当前索引<（游戏玩家长度-1））
{
//我使用的是隐藏回调，它是在对象完全隐藏后由jQUery触发的
gameArr[currentIndex].hide（函数（）{
currentIndex++；
gameArr[currentIndex].show（）；
});
}
});
首先，每个表单的submit类型按钮不应超过一个。请将submit按钮移动到表单结束标记之前
您不需要为每个问题都使用变量。使用jquery（有一段时间没有使用jquery了，我现在完全可以反应了），您应该能够像这样选择您的问题
var questions = $('form div')
然后您需要一个当前问题变量。可能所有div都有一个隐藏类。选择当前问题后，从当前div中删除该隐藏类
当用户提交表单时，如果不增加当前问题并显示下一个问题的div，您可以检查他们是否在问题数组的末尾。您可以隐藏上一个问题或使其可见（由您决定）.首先，每个表单的submit类型按钮不应超过一个。请将submit按钮移动到表单结束标记之前
您不需要为每个