Итерация по массиву

Question

У меня проблемы с итерацией по l oop для получения индекса в массиве. Когда обработчик события запускается, он идет прямо к последнему индексу вместо перехода к следующему индексу.

var elems = document.getElementsByClassName("question-container"); // returns a nodeList
var questionArray = jQuery.makeArray(elems);

nextButton.addEventListener('click', function () {
    for (var i = 0; i < questionArray.length; i++) {
        $(questionArray).hide();
        $(correct).hide();
        $(questionArray[i]).show();
    }
});

Html - это 8 делений, которые идентичны этому

<div class="question-container">

            <h2>How many rocketships do you see?</h2>
            <img class="small-img" src="img/rocket.png">
            <div>
                <button class="one" id="butt1" value="1">1</button>
                <button class="one" id="butt2" value="2">2</button>
                <button class="one" id="butt3" value="3">3</button>
                <button class="one" id="butt4" value="4">4</button>
                <button class="one" id="butt5" value="5">5</button>
            </div>

        </div>

Answer 1

Если я правильно понимаю, у вас есть 8 вопросов, но только один виден одновременно, и когда вы нажимаете кнопку next (не отображается в вашем коде), текущий вопрос скрывается, а следующий отображается .

Если это так, вот предложение

/* CSS */

.question-container {
    display: none;
}

.question-container-visible {
    display: block;
}

/* JavaScript */

const questionArray = [...document.getElementsByClassName("question-container")]; // this is of type Array
let questionIndex = 0; // keep track of the question which must be shown

nextButton.addEventListener('click', evt => {
    questionIndex++; // show the next question
    showQuestion();
});

function showQuestion() {
    questionArray.forEach((question, index) => {
        // show only the question which has an index equal to questionIndex
        question.classList.toggle('question-container-visible', index === questionIndex);
    });
}

showQuestion(); // show the first question

Если мы предположим, что первый вопрос имеет класс question-container-visible, с самого начала код JS может упроститься до

const questionArray = [...document.getElementsByClassName("question-container")];
let questionIndex = 0;

nextButton.addEventListener('click', evt => {
    questionIndex++;
    questionArray.forEach((question, index) => {
        question.classList.toggle('question-container-visible', index === questionIndex);
    });
});