javascript - 按下跨度时显示/隐藏 HTML 文本

Question

我试图在按下正确/错误跨度后显示隐藏的答案，同时隐藏问题。我已经设法做到了，但无论我按哪个正确/错误，只会出现第一个答案。

有谁知道如何做到这一点，它只会在按下的正确/错误的 li 中进行更改，而无需为所有内容编写 id="" 。

我有一个代码：

var correct = document.querySelectorAll(".correct");
var wrong   = document.querySelectorAll(".wrong");
var answer = document.querySelector(".answer");
var question = document.querySelector(".question");
var display = document.querySelector(".display");
var nodisplay = document.querySelector(".nodisplay");



for (var i = 0; i < correct.length; i++) {
  correct[i].addEventListener("click", function () {
    question.classList.add("nodisplay");
    question.textContent = "";
    answer.classList.remove("answer");
    answer.classList.add("display");
  });
}

for (var i = 0; i < wrong.length; i++) {
  wrong[i].addEventListener("click", function () {
    question.classList.add("nodisplay");
    question.textContent = "";
    answer.classList.remove("answer");
    answer.classList.add("display");
  });
}

.answer {

margin-left: 5px;

display: inline-block;

transition: 0.3s linear;

opacity: 0;

}



.question {

margin-left: 5px;

}



.diplay {

display: inline;

margin-left: 5px;

transition: 0.3s linear;

opacity: 0;

text-align: left;

float: left;

}



.nodisplay {

display: inline-block;

transition: 0.3s linear;

opacity: 0;

}

<div class="cont">

<h1 class="title">1/4 TEST<i class="fab fa-medapps"></i></h1>



<ul>

<li><span class="question">Question1</span><span class="answer">Correct answer is: </span><span class="yesno correct">NO</span><span class="yesno wrong">YES</span></li>

<li><span class="question">Question2</span><span class="answer">Correct answer is: </span><span class="yesno wrong">NO</span><span class="yesno correct">YES</span></li>

<li><span class="question">Question3</span><span class="answer">Correct answer is: </span><span class="yesno wrong">NO</span><span class="yesno correct">YES</span></li>

</ul>

</div>

标签： javascripthtmlcss

Answer 1

这是一个委托脚本

你可以从那里拿走

document.querySelector(".cont").addEventListener("click", function(e) {
  const li = e.target.closest("li");
  const parentUL = li.closest("ul");
  const yesno = li.querySelector(".yesno")

  const correct = parentUL.querySelectorAll(".correct");
  const wrong = parentUL.querySelectorAll(".wrong");
  const answer = parentUL.querySelector(".answer");
  const question = parentUL.querySelector(".question");
  const display = parentUL.querySelector(".display");
  const nodisplay = parentUL.querySelector(".nodisplay");

  if (yesno.classList.contains("correct")) {
    question.classList.add("nodisplay");
    question.textContent = "Correct";
    answer.classList.remove("answer");
    answer.classList.add("display");
  }

});

.answer {
  margin-left: 5px;
  display: inline-block;
  transition: 0.3s linear;
  opacity: 0;
}

.question {
  margin-left: 5px;
}

.diplay {
  display: inline;
  margin-left: 5px;
  transition: 0.3s linear;
  opacity: 0;
  text-align: left;
  float: left;
}

.nodisplay {
  display: inline-block;
  transition: 0.3s linear;
  opacity: 0;
}

<div class="cont">
  <h1 class="title">1/4 TEST<i class="fab fa-medapps"></i></h1>
  <ul>
    <li><span class="question">Question1</span><span class="answer">Correct answer is: </span><span class="yesno correct">NO</span><span class="yesno wrong">YES</span></li>
    <li><span class="question">Question2</span><span class="answer">Correct answer is: </span><span class="yesno wrong">NO</span><span class="yesno correct">YES</span></li>
    <li><span class="question">Question3</span><span class="answer">Correct answer is: </span><span class="yesno wrong">NO</span><span class="yesno correct">YES</span></li>
  </ul>
</div>