如何從div數組中獲取下一個對象？

Question

我正在嘗試瀏覽所有包含所有瑣事問題的Div列表。 我知道如何使用迭代器循環遍歷所有對象，但是我只想知道如何獲取一個Div，運行一些代碼，然后在用戶單擊Submit之后循環到數組中的下一個對象，然后運行相同的代碼，等等。 。我還隱藏了每個div，以便他們一次只能看到一個Div，直到完成上一個問題為止。 Java腳本非常新並且嘗試了盡可能快地學習，任何技巧都將不勝感激

 <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. &nbsp; Gerold Clegane
                        <br>
                        <input type="radio" name="q" value="wrong" id="q1b">b. &nbsp; Sandor clegane
                        <br>
                        <input type="radio" name="q" value="wrong" id="q1c">c. &nbsp; Oberyn Martell
                        <br>
                        <input type="radio" name="q" value="correct" id="q1d">d. &nbsp; 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. &nbsp; Tyrion Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2b">b. &nbsp; Jaime Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2c">c. &nbsp; Cersei Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q2d">d. &nbsp; 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. &nbsp; Bran Stark
                        <br>
                        <input type="radio" name="q" value="correct" id="q3b">b. &nbsp; Jon Snow
                        <br>
                        <input type="radio" name="q" value="wrong" id="q3c">c. &nbsp; Tommen Baratheon
                        <br>
                        <input type="radio" name="q" value="wrong" id="q3d">d. &nbsp; 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. &nbsp; Tyrion Lannister
                        <br>
                        <input type="radio" name="q" value="wrong" id="q4b">b. &nbsp; Jon Snow
                        <br>
                        <input type="radio" name="q" value="wrong" id="q4c">c. &nbsp; Bran Stark
                        <br>
                        <input type="radio" name="q" value="correct" id="q4d">d. &nbsp; 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. &nbsp; White Walkers
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5b">b. &nbsp; Wildings
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5c">c. &nbsp; Mother of Dragons
                        <br>
                        <input type="radio" name="q" value="wrong" id="q5d">d. &nbsp; Night walkers
                        <br>
                        <button class="submit"  type="submit">Submit</button>
                    </div>
                </form>

這是我的Javascript

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

Answer 1

您必須記住最后一個職位。

因此，您有一個變量，將其稱為lastGame之類。 這將是與correctAnswers等級別相同的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()

Answer 2

每當用戶點擊答案時，使全局迭代器增加其值，隱藏舊的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();
      });
    }
});

Answer 3

首先，每個表單的提交按鈕數量不應超過一個。 將提交按鈕移到表單的結束標記之前。

您不需要每個問題都包含變量。 使用您的jquery（我已經有一段時間沒有使用jquery了，我現在已經做出反應了），您應該可以選擇這樣的問題

var questions = $('form div')

然后，您將需要一個當前的問題變量。 也許所有的div都有一個隱藏的類。 選擇當前問題后，從當前div中刪除該隱藏的類。

當用戶提交表單時，如果不增加當前問題並顯示下一個問題的div，則可以檢查它們是否位於問題數組的末尾。 您可以隱藏上一個問題或使其可見（由您自己決定）。