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

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)，请尝试使用“code sn-p”选项编辑答案。

// 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>