在单击不同的内容后隐藏文本
我在这里的目标是让我的页面中的谜语一次显示一个。我的讲师向我们展示了一种使用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“。你最好的推荐是什么？
回答 4
Stack Overflow用户
发布于 2015-04-17 02:00:50
var isVisible = new Array();
isVisible[0] = false;
isVisible[1] = false;
function revealAnswer(answerId, answer, indexNum){
if(isVisible[indexNum]==false){
var spanAnswer = document.querySelectorAll(".answers");
for(i=0;i < spanAnswer.length ; i++){
spanAnswer[i].innerHTML = '';
isVisible[i] = false;
}
document.getElementById(answerId).innerHTML = answer;
isVisible[indexNum]=true;
console.log(answerId);
}
else{
document.getElementById(answerId).innerHTML = "";
isVisible[indexNum]=false;
}
}<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>
这就是你要的
document.querySelectorAll在IE中不起作用
下面是在IE中也可以使用的传统代码
function revealAnswer(answerId, answer, indexNum){
if(isVisible[indexNum]==false){
var spanAnswer = document.getElementsByTagName("span");
for(i=0;i < spanAnswer.length ; i++){
if(spanAnswer[i].id == "answer"+(i+1)){
spanAnswer[i].innerHTML = '';
}
}
document.getElementById(answerId).innerHTML = answer;
isVisible[indexNum]=true;
console.log(answerId);
}
else{
document.getElementById(answerId).innerHTML = "";
isVisible[indexNum]=false;
}
}Stack Overflow用户
发布于 2015-04-17 02:13:11
Jquery会让你的生活变得更轻松。去看看这个：http://www.w3schools.com/JQuery/jquery_hide_show.asp
要使用Jquery隐藏或显示元素，您只需为您的HTML元素提供一个id，如下所示：<button id="hide">ButtonHide</button>
然后在JQuery中调用该按钮上的事件：
$(document).ready(function(){
$("#hide").click(function(){
$("#hide").hide();
});
});#是对html中ID的直接引用，这使得从jquery访问它变得很容易。
如果你想用jquery隐藏答案，你需要做的就是：
- 为其提供ID：
问题2上的<p id="Question2">blablabla</p>
- Set
<p id="Question1Answer">blablabla</p>事件
$(文档).ready(function(){$(“#Question2”).click(){ $("#Question1Answer").hide()；})；});
要使其更清楚地包含在您的代码中，请查看我在答案顶部发布的链接
点击下面的链接查看如何包含Jquery：http://www.w3schools.com/jquery/jquery_get_started.asp
Stack Overflow用户
发布于 2015-04-17 02:15:14
这里有一种不同的方法。它切换当前答案的可见性，然后隐藏所有其他答案。
这简化了HTML，因为您不需要任何ID。抓取与点击的问题对应的答案。
它还简化了JavaScript，因为您不需要全局数组来保存每个答案的可见性。
function revealAnswer(p) {
var ans= p.nextElementSibling,
all= document.querySelectorAll('.answers');
ans.classList.toggle('visible');
for(var i = 0 ; i < all.length ; i++) {
if(all[i] !== ans) all[i].classList.remove('visible');
}
}.answers {
display: none;
}
.visible {
display: block;
}<h5>Question 1</h5>
<p onClick="revealAnswer(this)">When is homework not homework?</p>
<p class="answers">When it is turned into the teacher</p>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer(this)">What goes up when rain comes down?</p>
<p class="answers">An Umbrella</p>
<hr>
https://stackoverflow.com/questions/29682341
复制相似问题
腾讯云开发者
