HTML/CSS/JS：按下按钮即可'Show'答案

Question

我正在为我的网页创建一个测验。目前，我有一个功能正在处理第一个问题。其中按钮将显示"；显示解决方案"；。单击后，它将显示该元素。当前按钮不将按钮文本更改为"0"；隐藏解决方案"；一旦它已经被显示。

主要问题是我有多个问题。当我点击显示解决方案时，它会显示第一个问题。我知道该函数与该函数链接，但我不想多次复制该函数并将ID更改为answer1、answer2等。

我看过谷歌/堆栈和YouTube视频上的帖子，但我真的不明白。

这是我的代码

function show_hide()
{
var myAnswer = document.getElementById('answer');
var displaySetting = myAnswer.style.display;
var quizButton = document.getElementsByClassName('quiz-button');
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Answer';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Answer';
}
}

.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}

<div class="part-content quiz">
<h2>Chapter 1.1 End of Topic Quiz</h2>
<p>
The following quiz is meant to reinforce your understanding of the material presented above.
</p>
<!-- Question 1 Start -->
<h4 class="quiz-question">1. What is a statement? </h4>
<button onclick="show_hide()" class="quiz-button">Show Solution</button>
<p id="answer">
A <b>statement</b> is an instruction in a computer program that tells the computer to perform an action.
</p>
<br><br><hr>
<!-- Question 1 End -->
<!-- Question 2 Start -->
<h4 class="quiz-question">2. What is a function? </h4>
<button onclick="show_hide()" class="quiz-button">Show Solution</button>
<p id="answer">
A <b>function</b> is several statements that are executed sequentially.
</p>
<br><br><hr>
</div>

Answer 1

这里有一个最简单的解决方案：

将所有onclick="show_hide()"更改为onclick="show_hide(this)"

将JS更改为：

<script>
function show_hide(element)
{
var myAnswer = element.nextElementSibling;
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Answer';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Answer';
}
}
</script>

有了这个，你就不需要再参考答案的ID了。

"；这个"；在onclick属性中是指按钮本身；nextElementSibling"；指的是元素(按钮(的下一个元素(在您的情况下是包含答案的

(。所以实际上var myAnswer的意思是得到按钮的下一个元素。

然而，使用此功能，您需要确保按钮的下一个元素是答案元素，否则将无法工作。

此外，直接var quizButton = document.getElementsByClassName('quiz-button');不起作用的原因是，正如您所看到的，它得到了多个s元素，而不是一个元素。不同的元素可以具有相同的类。这将返回具有类的元素数组，而不是具有类的第一个元素。