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" );将使常见问题解答项目"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);
  });
});