如何检查具有可变子元素的元素是否包含具有特定值的数组属性？

Question

有人可以看看我的代码，让我知道如何编写这个函数。 我正在创建一个序列测验，答案必须按正确的顺序排列。

当玩家对他们的订单感到满意时，就会有一个检查答案功能。 问题来自一个数组，其中为每个答案定义了一个{"correct_order" :1}属性。

我想知道我现在如何编写代码来检查{"correct_order" :1}是否包含在 answerOneContainer 中。 下面是测验容器和完整 JS 的 HTML 以及我尝试检查容器是否在 // CHECK ANSWER FUNCTION 中包含{"correct_order" :1}但我不确定如何编写这段代码：

 // VARIABLES const quizQuestion = document.getElementById('question'); const answerOne = document.getElementById('ans1'); const answerTwo = document.getElementById('ans2'); const answerThree = document.getElementById('ans3'); const answerFour = document.getElementById('ans4'); const answerFive = document.getElementById('ans5'); const answerOneContainer = document.getElementById('container1'); const answerTwoContainer = document.getElementById('container2'); const answerThreeContainer = document.getElementById('container3'); const answerFourContainer = document.getElementById('container4'); const answerFiveContainer = document.getElementById('container5'); // QUIZ QUESTIONS ARRAY const myQuestions = [ { question: "Starting with the most put these countries in order of total population", answers: [ { "correct_order": 5, "details": "Ireland" }, { "correct_order": 2, "details": "United States" }, { "correct_order": 3, "details": "Russia" }, { "correct_order": 1, "details": "China" }, { "correct_order": 4, "details": "United Kingdom" } ] }, { question: "Starting with the most put these countries in order of size", answers: [ { "correct_order": 2, "details": "Canada" }, { "correct_order": 5, "details": "Ireland" }, { "correct_order": 3, "details": "Australia" }, { "correct_order": 4, "details": "Mexico" }, { "correct_order": 1, "details": "Russia" } ] }, { question: "Starting with the most put these languages in order of most spoken", answers: [ { "correct_order": 2, "details": "English" }, { "correct_order": 5, "details": "Arabic" }, { "correct_order": 3, "details": "Hindustani" }, { "correct_order": 4, "details": "Spanish" }, { "correct_order": 1, "details": "Mandarin Chinese" } ] } ] // BUILD QUIZ FUNCTION document.getElementById("start-quiz").onclick = function () { buildQuiz() }; let counter = 0; function buildQuiz() { document.getElementById("callout").classList.add("d-none"); document.getElementById("quiz").classList.remove("d-none"); quizQuestion.innerHTML = myQuestions[counter].question; answerOne.innerHTML = myQuestions[counter].answers[0].details; answerTwo.innerHTML = myQuestions[counter].answers[1].details; answerThree.innerHTML = myQuestions[counter].answers[2].details; answerFour.innerHTML = myQuestions[counter].answers[3].details; answerFive.innerHTML = myQuestions[counter].answers[4].details; }; // SWAP ANSWERS FUNCTION let answerContainers = { "container1": answerOneContainer, "container2": answerTwoContainer, "container3": answerThreeContainer, "container4": answerFourContainer, "container5": answerFiveContainer, } function swapAnswersContainer(switchButton, container1, container2) { document.getElementById(switchButton).addEventListener('click', () => { $("#" + container1).children(":first").slideToggle('fast'); $("#" + container2).children(":first").slideToggle('fast', function () { answerContainers[container2].appendChild(answerContainers[container1].firstElementChild); answerContainers[container1].appendChild(answerContainers[container2].firstElementChild); }); $("#" + container1).children(":first").slideToggle('fast'); $("#" + container2).children(":first").slideToggle('fast'); }); } swapAnswersContainer("switch1", "container1", "container2"); swapAnswersContainer("switch2", "container2", "container3"); swapAnswersContainer("switch3", "container3", "container4"); swapAnswersContainer("switch4", "container4", "container5"); // CHECK ANSWER FUNCTION document.getElementById("quizSubmit").onclick = function () { checkAnswer() }; function checkAnswer() { document.getElementById("quizSubmit").classList.add("d-none"); document.getElementById("nextQuestion").classList.remove("d-none"); let score = 0; if (answerOneContainer.firstElementChild === "correct_order": "1") { document.getElementById("container1").classList.add("green-border") } else { document.getElementById("container1").classList.add("red-border") } }; // NEXT QUESTION FUNCTION document.getElementById("nextQuestion").onclick = function () { nextButton() }; function nextButton() { if (counter >= myQuestions.length) { counter = 0; return; } counter++; buildQuiz(); document.getElementById("nextQuestion").classList.add("d-none"); document.getElementById("quizSubmit").classList.remove("d-none"); };

 <div id="quiz" class="quiz-container d-none"> <div id="question" class="quiz-question"></div> <div id="container1" class="answer-container"> <div id="ans1" class="answer"></div> </div> <div class="button-container"> <button id="switch1" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container2" class="answer-container"> <div id="ans2" class="answer"></div> </div> <div class="button-container"> <button id="switch2" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container3" class="answer-container"> <div id="ans3" class="answer"></div> </div> <div class="button-container"> <button id="switch3" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container4" class="answer-container"> <div id="ans4" class="answer"></div> </div> <div class="button-container"> <button id="switch4" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container5" class="answer-container"> <div id="ans5" class="answer"></div> </div> <button id="quizSubmit" class="quiz-submit btn btn-primary btn-lg">Check Answer</button> <button id="nextQuestion" class="quiz-submit btn btn-primary btn-lg d-none">Next Question</button> </div>

Answer 1

您的代码中有很多错误，很难准确解读您想要做什么。

到目前为止，我进行了这些更改以尝试为您提供一个最小的可重现示例（ https://stackoverflow.com/help/minimal-reproducible-example ）

您需要发布一些我们可以自己运行和测试的代码（ https://stackoverflow.com/help/minimal-reproducible-example ），请尝试使用“代码片段”选项编辑答案。

 // VARIABLES const quizQuestion = document.getElementById('question'); const answerOne = document.getElementById('ans1'); const answerTwo = document.getElementById('ans2'); const answerThree = document.getElementById('ans3'); const answerFour = document.getElementById('ans4'); const answerFive = document.getElementById('ans5'); const answerOneContainer = document.getElementById('container1'); const answerTwoContainer = document.getElementById('container2'); const answerThreeContainer = document.getElementById('container3'); const answerFourContainer = document.getElementById('container4'); const answerFiveContainer = document.getElementById('container5'); // QUIZ QUESTIONS ARRAY const myQuestions = [ { question: "Starting with the most put these countries in order of total population", answers: [ { "correct_order": 5, "details": "Ireland" }, { "correct_order": 2, "details": "United States" }, { "correct_order": 3, "details": "Russia" }, { "correct_order": 1, "details": "China" }, { "correct_order": 4, "details": "United Kingdom" } ] }, { question: "Starting with the most put these countries in order of size", answers: [ { "correct_order": 2, "details": "Canada" }, { "correct_order": 5, "details": "Ireland" }, { "correct_order": 3, "details": "Australia" }, { "correct_order": 4, "details": "Mexico" }, { "correct_order": 1, "details": "Russia" } ] }, { question: "Starting with the most put these languages in order of most spoken", answers: [ { "correct_order": 2, "details": "English" }, { "correct_order": 5, "details": "Arabic" }, { "correct_order": 3, "details": "Hindustani" }, { "correct_order": 4, "details": "Spanish" }, { "correct_order": 1, "details": "Mandarin Chinese" } ] } ] // BUILD QUIZ FUNCTION document.getElementById("start-quiz").onclick = buildQuiz; let counter = 0; function buildQuiz() { //document.getElementById("callout").classList.add("d-none"); document.getElementById("quiz").classList.remove("d-none"); quizQuestion.innerHTML = myQuestions[counter].question; answerOne.innerHTML = myQuestions[counter].answers[0].details; answerTwo.innerHTML = myQuestions[counter].answers[1].details; answerThree.innerHTML = myQuestions[counter].answers[2].details; answerFour.innerHTML = myQuestions[counter].answers[3].details; answerFive.innerHTML = myQuestions[counter].answers[4].details; }; // SWAP ANSWERS FUNCTION let answerContainers = { container1: answerOneContainer, container2: answerTwoContainer, container3: answerThreeContainer, container4: answerFourContainer, container5: answerFiveContainer } function swapAnswersContainer(switchButton, container1, container2) { document.getElementById(switchButton).addEventListener('click', () => { $("#" + container1).children(":first").slideToggle('fast'); $("#" + container2).children(":first").slideToggle('fast', function () { answerContainers[container2].appendChild(answerContainers[container1].firstElementChild); answerContainers[container1].appendChild(answerContainers[container2].firstElementChild); }); $("#" + container1).children(":first").slideToggle('fast'); $("#" + container2).children(":first").slideToggle('fast'); }); } swapAnswersContainer("switch1", "container1", "container2"); swapAnswersContainer("switch2", "container2", "container3"); swapAnswersContainer("switch3", "container3", "container4"); swapAnswersContainer("switch4", "container4", "container5"); // CHECK ANSWER FUNCTION document.getElementById("quizSubmit").onclick = checkAnswer; function checkAnswer() { document.getElementById("quizSubmit").classList.add("d-none"); document.getElementById("nextQuestion").classList.remove("d-none"); let score = 0; if (answerOneContainer.firstElementChild["correct_order"] === "1") { document.getElementById("container1").classList.add("green-border") } else { document.getElementById("container1").classList.add("red-border") } }; // NEXT QUESTION FUNCTION document.getElementById("nextQuestion").onclick = nextButton; function nextButton() { if (counter >= myQuestions.length) { counter = 0; return; } counter++; buildQuiz(); document.getElementById("nextQuestion").classList.add("d-none"); document.getElementById("quizSubmit").classList.remove("d-none"); };

 <div id="quiz" class="quiz-container d-none"> <div id="question" class="quiz-question"></div> <div id="container1" class="answer-container"> <div id="ans1" class="answer"></div> </div> <div class="button-container"> <button id="switch1" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container2" class="answer-container"> <div id="ans2" class="answer"></div> </div> <div class="button-container"> <button id="switch2" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container3" class="answer-container"> <div id="ans3" class="answer"></div> </div> <div class="button-container"> <button id="switch3" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container4" class="answer-container"> <div id="ans4" class="answer"></div> </div> <div class="button-container"> <button id="switch4" class="btn-style"><i class="fas fa-sync switch-button"></i></button> </div> <div id="container5" class="answer-container"> <div id="ans5" class="answer"></div> </div> <button id="quizSubmit" class="quiz-submit btn btn-primary btn-lg">Check Answer</button> <button id="nextQuestion" class="quiz-submit btn btn-primary btn-lg d-none">Next Question</button> <button id="start-quiz" class="quiz-submit btn btn-primary btn-lg d-none">Start Quiz</button> </div>