javascript脚本无法将类列表添加到元素答案

【问题标题】：javascript script no working adding classlist to an elementjavascript脚本无法将类列表添加到元素
【发布时间】：2021-10-20 13:55:06
【问题描述】：

我正在尝试使用 javascript 制作一个测验应用程序，但是当我单击其中一个选项时，如果它是第一个选项，我想将其设置为正确，而将其他选项设置为不正确，则它不起作用对我不起作用我不知道问题出在哪里或我做错了什么，...

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" href="./../images/quizapp.png" type="image" >

<link rel="stylesheet" href="./../css/bootstrap.min.css">

<link rel="stylesheet" href="./../css/default.css">

<link rel="stylesheet" href="./../css/quizap.css">

<title>Document</title>

<header class="container p-4 text-center border">

    <h1 class="h1 text-danger">Quiz Application With JavaScript</h1>

</header>

<div class="container landing p-5 mt-3 text-center">

    <div class="description m-auto">

        <h2 class="h2 border text-center p-3">Welcome To The Quiz App...</h2>

    </div>

    <div class="collection container" id="categorie">

        <div class="row mt-5 container">

            <div class="col-4 categories text-center" id="sports">

                Sports

            </div>

            <div class="col-4 categories text-center" id="music">

                Music

            </div>

            <div class="col-4 categories text-center" id="food" >

                General

            </div>

        </div>

    </div>

    <div class="question" id="sports_question">

        <div class="list_questions list-group" id="answers">

            <li class="list-group-item">

                <h3 class="h3">

                    <div id="firstQuestion" class="container q_container">

                        <div class="card my-card">

                            <div class="card-body ">

                                <h5 class="card-title">Who Is My Favorite FootBall Team?</h5>

                                <p class="card-text options">

                                    <div class="option_one option" value="1">Wydad</div>

                                    <div class="option_two option" value="0">Raja</div>

                                    <div class="option_thre option" value="0">Mat</div>

                                    <div class="option_frour option" value="0">Fus</div>

                                </p>

                            </div>

                        </div>

                    </div>

                </h3>

            </li>

            <li class="list-group-item">

                <h3 class="h3">

                    <div id="firstQuestion" class="container q_container">

                        <div class="card my-card">

                            <div class="card-body ">

                                <h5 class="card-title">Who Is My Favorite FootBall Team?</h5>

                                <p class="card-text options">

                                    <div class="option_one option">Wydad</div>

                                    <div class="option_two option">Raja</div>

                                    <div class="option_thre option">Mat</div>

                                    <div class="option_frour option">Fus</div>

                                </p>

                            </div>

                        </div>

                    </div>

                </h3>

            </li>

            <li class="list-group-item">

                <h3 class="h3">

                    <div id="firstQuestion" class="container q_container">

                        <div class="card my-card">

                            <div class="card-body ">

                                <h5 class="card-title">Who Is My Favorite FootBall Team?</h5>

                                <p class="card-text options">

                                    <div class="option_one option">Wydad</div>

                                    <div class="option_two option">Raja</div>

                                    <div class="option_thre option">Mat</div>

                                    <div class="option_frour option">Fus</div>

                                </p>

                            </div>

                        </div>

                    </div>

                </h3>

            </li>

            <li class="list-group-item">

                <h3 class="h3">

                    <div id="firstQuestion" class="container q_container">

                        <div class="card my-card">

                            <div class="card-body ">

                                <h5 class="card-title">Who Is My Favorite FootBall Team?</h5>

                                <p class="card-text options">

                                    <div class="option_one option">Wydad</div>

                                    <div class="option_two option">Raja</div>

                                    <div class="option_thre option">Mat</div>

                                    <div class="option_frour option">Fus</div>

                                </p>

                            </div>

                        </div>

                    </div>

                </h3>

            </li>

            <li class="list-group-item">

                <h3 class="h3">

                        <div id="firstQuestion" class="container q_container">

                        <div class="card my-card">

                            <div class="card-body ">

                                <h5 class="card-title">Who Is My Favorite FootBall Team?</h5>

                                <p class="card-text options">

                                    <div class="option_one option">Wydad</div>

                                    <div class="option_two option">Raja</div>

                                    <div class="option_thre option">Mat</div>

                                    <div class="option_frour option">Fus</div>

                                </p>

                            </div>

                        </div>

                    </div>

                </h3>

            </li>

        </div>

    </div>

</div>

<script src="./../script/popper.min.js"></script>

<script src="./../script/bootstrap.min.js"></script>

<script src="./../script/quizap.js"></script>

这是javascript代码：

let categories = document.querySelectorAll('.categories');


let sports_question = document.getElementById('sports_question');


let collection = document.getElementById('categorie');


let options = document.querySelectorAll('.list_questions');


let elements = document.querySelectorAll('.question');



for (let i = 0; i < options.length; i++) {

  options[i].addEventListener('click', function (e) {

    const selectedOption = e.target;

    console.log(selectedOption);

    const correct = selectedOption.dataset.correct;

    Array.from(options[i].children).forEach(option => {

        SetStatus(option, option.dataset.correct);

        console.log(option.dataset.correct + 'this is the option');

    });
  })

}
function SetStatus(option, correct) {

  if (correct) {

    option.classList.add('correct');

  } else {

    option.classList.add('in-correct');

  }
}

for (let i = 0; i < categories.length; i++) {

  categories[i].addEventListener('click', function () {

    sports_question.classList.toggle('active');

    collection.classList.toggle('hide');

  })

}

【问题讨论】：

let options = document.querySelectorAll('.list_questions'); 中存在问题，当只有一个类 .list_questions 的 div 时，为什么要使用 querySelectorAll？
如何解决我的菜鸟错误...？
您是否将代码复制到某个地方？ ??????
不，那是我的 :( 我知道它在 javascript 中并不干净，我是新的

标签： javascript html css arrays dom-events

【解决方案1】：

首先 div标签不能在p标签内，因为段落会在输入div标签的地方被打断。

所以把p和div改成ul和li

HTML

<ul class="card-text options">
    <li class="option_one option" value="1">Wydad</li>
    <li class="option_two option" value="0">Raja</li>
    <li class="option_thre option" value="0">Mat</li>
    <li class="option_frour option" value="0">Fus</li>
</ul>

JavaScript

const options = document.querySelectorAll(".option");

(function addEventListeners() {
  options.forEach((option) => {
    option.addEventListener("click", (event) => {
      const { parentNode } = event.target;

      setClasses(parentNode, option);
    });
  });
})();

function setClasses({ children }, selected) {
  [...children].forEach((child) => {
    if (child !== selected) {
      child.classList.add("in-correct");
      child.classList.remove("correct");
      return;
    }
    child.classList.remove("in-correct");
    child.classList.add("correct");
  });
}

【讨论】：

【解决方案2】：

querySelector all 返回 nodeList 而不是元素数组。使用扩展运算符将它们转换为数组。这是一个例子

let options = [...document.querySelectorAll('.list_questions')];

【讨论】：

当各个className 中只有一个元素时，不需要这样做。
我假设因为这是一个测验，他可能会添加更多问题
我也同意他应该添加清晰的代码。 js 也很乱，有些内部代码块有些不是。
我是 javascript 新手，我为我的凌乱代码道歉，我只是想学习
只需将所有代码添加到文件中即可。并在代码前添加他们的文件名。