我试图在按下正确/错误的跨度后显示隐藏的答案,同时隐藏问题。我已经设法做到了,但无论我按哪个正确/错误,只会出现第一个答案。
有没有人知道怎么做,它只会改变按正确/错误的 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>
答案 0 :(得分:0)
这是一个委托脚本
你可以从那里拿走
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>
答案 1 :(得分:0)
我编写了一个简单的代码,您可以根据自己的需要进行更改。
function showStuff(id) {
document.getElementById("hiddenSpan").style.display = 'block';
}
<td class="post">
<span id="answer1" onclick="showStuff()">
Click Me and I will make text appear
</span>
<span id="hiddenSpan" style="display : none;">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>