Question

我的目标是让我的页面中的谜语一次显示一个。我的讲师向我们展示了使用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”。你最好的推荐是什么？

Answer 1

 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;
    }
}

Answer 2

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：

<p id="Question1Answer">blablabla</p> <p id="Question2">blablabla</p>

在问题2上设置一个事件

$(document).ready(function(){
    $("#Question2").click(function(){
        $("#Question1Answer").hide();
    });
});

为了更清楚地了解如何将其纳入您的代码，请查看我在答案顶部发布的链接

请检查以下链接，了解如何包含Jquery：http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 3

这是一种不同的方法。它切换当前答案的可见性，然后隐藏所有其他答案。

这简化了HTML，因为您不需要任何ID。 nextElementSibling 抓住了点击问题的答案。

它还简化了JavaScript，因为您不需要全局数组来保持每个答案的可见性。

＆＃13;

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');
  }
}

＆＃13;

.answers {
  display: none;
}

.visible {
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 4

我知道有两种方法可以做到这一点。一种方法是在页面上放置隐形的无线电按钮并在标签中写下问题，但这是一个非常特殊的黑客攻击。让我们做一些更简单的事情。

您可以只存储哪一个是可见的，而不是存储所有答案的状态。然后，当您单击某个问题时，将隐藏当前可见的答案并显示新答案。

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>

点击不同的东西后隐藏文字

4 个答案: