🤪 自己紹介ページ-3の作成

7681 ワード
CSS 自己紹介ページ JavaScript テキストリンク
今日は簡単なカード形式で私への質問と回答を提出しました.
  • 問題の答えは配列とオブジェクトからなる
    • const data = [
    {
      question: "저는 몇살 일까요?",
      anwser: "1993년에 태어난 28살입니다.",
    },
    {
      question: "저의 혈액형은 무엇일까요?",
      anwser: "O형 입니다.",
    },
    ]
  • 配列の各インデックスにアクセスする方法
    data[index]
  • オブジェクトの各プロパティにアクセスする方法
    data[index].question
    data[index].answer
  • 文書オブジェクトモデル(DOM)を使用してHTML文書
    • を処理する.
     for (let i = 0; i < data.length; i++) {
    const $quizCard = document.createElement("div");
    $quizCard.classList.add("quiz-card");
    $quizCard.id = i;
    $quizCard.innerText = data[i].question;
    $quizBoard.appendChild($quizCard);
  }
    上記のコードは、HTMLドキュメントに表示されるように問題を記入するカードを作成します.
    HTMLで書くことはできますが、現在のページでは6つの問題があります.
    そうすると、6枚のカードを作るHTML文法を書く必要があります.
    重複を減らすために、JavaScriptは上記の構文を使用してforに6つの要素を作成します.
  • 質問Click Event発生時回答
      for (let i = 0; i < $quizCard.length; i++) {
    $quizCard[i].addEventListener("click", () => {
      if ($quizCard[i].classList.contains("answer")) {
        $quizCard[i].classList.remove("answer");
        $quizCard[i].textContent = data[i].question;
        $quizCard[i].classList.add("click");
      } else {
        $quizCard[i].classList.add("answer");
        $quizCard[i].textContent = data[i].anwser;
        $quizCard[i].classList.remove("click");
      }
    });
  }
    • KaliインストールVmotoolsの問題解決
    12.15