时间戳

首页 > 解决方案 > javascript脚本无法将类列表添加到元素

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

问题描述

我正在尝试使用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');

  })

}

标签： javascripthtmlcssarraysdom-events

解决方案

首先 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");
  });
}

推荐阅读