在单击不同的内容后隐藏文本
在单击不同的内容后隐藏文本
提问于 2015-04-17 01:48:54
我在这里的目标是让我的页面中的谜语一次显示一个。我的讲师向我们展示了一种使用JavaScript变量的方法。在我的HTML中，有两个谜语作为示例显示：
<h5>Question 1</h5>
<p onClick="revealAnswer('answer1','When it is turned into the teacher', 0)">When is homework not homework?</p><br/>
<span id="answer1" class="answers"></span><br/>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer('answer2','An Umbrella', 1)">What goes up when rain comes down?</p><br/>
<span id="answer2" class="answers"></span><br/>
<hr>在外部JavaScript中，我有以下代码来公开答案：
var isVisible = new Array();
isVisible[0] = false;
isVisible[1] = false;
function revealAnswer(answerId, answer, indexNum){
if(isVisible[indexNum]==false){
document.getElementById(answerId).innerHTML = answer;
isVisible[indexNum]=true;
console.log(answerId);
}
else{
document.getElementById(answerId).innerHTML = "";
isVisible[indexNum]=false;
}我的目标是当你点击“问题1”时，它会向你显示答案，但当你点击“问题2”时，“问题1”的答案就会消失，而是向你展示“问题2”的答案。我对JavaScript完全陌生，但我的最佳猜测是要么添加一个新函数，要么在现有的"revealAnswer“函数中添加一个额外的"if”或"else“。你最好的推荐是什么？
Stack Overflow用户
发布于 2015-04-17 02:31:03
我知道两种方法可以做到这一点。一种是将看不见的单选按钮放在页面上，并将问题写在标签上，但这是一个相当奇怪的技巧。让我们做一些简单的事情。
您可以只存储哪个答案是可见的，而不是存储所有答案的状态。然后，当您单击一个问题时，当前可见的答案将隐藏，并显示新的答案。
var visibleAnswer = null;
function revealAnswer(answerId, answer){
var answerElement = document.getElementById(answerId);
if(visibleAnswer) {
visibleAnswer.innerHTML = "";
}
if(!visibleAnswer || visibleAnswer.id !== answerElement.id) {
answerElement.innerHTML = answer;
visibleAnswer = answerElement;
} else {
answerElement.innerHTML = "";
visibleAnswer = null;
}
}<h5>Question 1</h5>
<p onClick="revealAnswer('answer1','When it is turned into the teacher')">When is homework not homework?</p><br/>
<span id="answer1" class="answers"></span><br/>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer('answer2','An Umbrella')">What goes up when rain comes down?</p><br/>
<span id="answer2" class="answers"></span><br/>
<hr>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29682341
复制相关文章
相似问题
腾讯云开发者
