Javascript循环遍历函数以使跨度隐藏和可见

Question

我的一个任务是为一个网站制作一个常见问题解答页面，当您单击一个问题时会显示答案，并且一次只允许一个问题可见。到目前为止我是这样做的：

<li button onclick="answerOne();">question</li>
<span id="FAQA1" style="visibility: hidden; color: red;">answer</span>
<li button onclick="answerTwo();">question</li>
<span id="FAQA2" style="visibility: hidden; color: red;">answer</span>
<li button onclick="answerThree();">question</li>
<span id="FAQA3" style="visibility: hidden; color: red;">answer</span>

我的 Javascript 看起来像这样：

function answerOne() {
        document.getElementById("FAQA1").style.visibility = "visible";
        document.getElementById("FAQA2").style.visibility = "hidden";
        document.getElementById("FAQA3").style.visibility = "hidden";
    }

    function answerTwo() {
        document.getElementById("FAQA1").style.visibility = "hidden";
        document.getElementById("FAQA2").style.visibility = "visible";
        document.getElementById("FAQA3").style.visibility = "hidden";
    }

    function answerThree() {
        document.getElementById("FAQA1").style.visibility = "hidden";
        document.getElementById("FAQA2").style.visibility = "hidden";
        document.getElementById("FAQA3").style.visibility = "visible";
    }

现在这一切都很好，但是如果页面变得更大，您将不得不更改每个功能。我知道必须有更好的方法才能达到相同的结果，但我似乎碰壁了。如果有人知道这样做的方法，你能指出我正确的方向或我可以找到它的来源吗？非常感谢。

Answer 1

你可以试试这样的：

var current = false;

function makeActive( key ) {

    if( current !== false ) {

        document.getElementById( "FAQ" + current ).style.visibility = "hidden";

    }

    document.getElementById( "FAQ" + key ).style.visibility = "visible";

    current = key;

}

调用makeActive( "A1" ); 会使FAQ 项目“A1”可见，而之前激活的项目不可见

Answer 2

您可以通过多种方式做到这一点。这是一个不涉及这么多功能的。

像这样设置你的 HTML：

<li onclick="showAnswer('FAQA1')">question</li>
<span id="FAQA1" class="answer" style="visibility: hidden; color: red;">answer</span>
<li onclick="showAnswer('FAQA2')">question</li>
<span id="FAQA2" class="answer" style="visibility: hidden; color: red;">answer</span>
<li onclick="showAnswer('FAQA3')">question</li>
<span id="FAQA3" class="answer" style="visibility: hidden; color: red;">answer</span>

请注意，所有li 元素都使用相同的函数，只需将字符串传递给它。答案spans都具有相同的类和唯一的id。

然后是Javascript：

function showAnswer(ele) {
    [].forEach.call(document.querySelectorAll('.answer'), function(el) {
      el.style.visibility = 'hidden';
    });
    document.getElementById(ele).style.visibility = 'visible';
}

所以在这里，所有具有answer 类的元素都有一个forEach 循环（答案跨越）。这会遍历所有答案并隐藏它们。然后，最后一行选择具有特定 id 的元素（我们已将其作为字符串从 onclick 传递给函数）并将该答案设置为可见。

小提琴：https://jsfiddle.net/dsmw0abe/2/

另外，仅供参考，请记住 visibility 与 display 不同。

Answer 3

您可以创建一个功能，让您有无限数量的问题。通过为每个答案span 提供相同的类，您不必在代码中明确定义每个答案。

因为你的答案从 1 开始，所以我从 1 而不是 0 开始循环。

例子：

window.answerQuestion = function answerQuestion(id) {
  var questionEls = document.getElementsByClassName("answer");

  for (var x = 1; x <= questionEls.length; x++) {
    var question = questionEls[x-1];

    if (x === id) {
      question.style.visibility = 'visible';
    } else {
      question.style.visibility = ' hidden';
    }
  }

};

演示：

https://jsfiddle.net/j3k89o5a/

Answer 4

一种方法是从隐藏所有答案开始，然后在 div 中侦听一个事件，此时您可以捕获单击了哪个项目并切换最近的后续答案的可见性。如果再次单击它，它将关闭该答案。这允许用户在他们认为合适的时候打开每个问题，并防止页面跳转 - 即在单击新问题时关闭先前的答案。

举例

HTML

<div class="faq">
  <h1>First Question</h1>
  <p>Answer to the question</p>
  <h1>Second Question</h1>
  <p>Answer to the question</p>
  <h1>Third Question</h1>
  <p>Answer to the question</p>
</div>

CSS

.faq {
  display: none
}

Javascript/jQuery（如果需要，可以使用 vanilla js 完成）

$(function() {
  $('.faq h1').click(function() {
    $(this).next('p').slideToggle(400);
  });
});