javascript - 无论如何强制所有样式为 "block"或 "none"而不通过循环？

Question

好的，看这段代码

<p>This is question 1.</p>

<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42"  onclick="toggleAnswer(1)">

<p id="1">This answer1.</p>

<p>This is question 2.</p>

<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42"  onclick="toggleAnswer(2)">

<p id="2">This answer2.</p>

<script type="text/javascript">

function toggleAnswer(no){
        if (document.getElementById(no).style.display=="none")
        {
          document.getElementById(no).style.display="block";
        }
        else
        {
          document.getElementById(no).style.display="none";
        }
 }    

   </script>  

这段代码意味着有很多问题，如果我们点击特定问题旁边的图片，相应的答案就会出现。

现在，我想制作一个按钮“显示所有”和“关闭所有”。当人们点击“显示全部”时，它会显示所有答案，当点击“关闭所有”时，它会关闭所有答案。

我的问题是

是否可以在不经过循环的情况下强制页面内的所有元素具有“ block ”或“无”样式？

Answer 1

您可以在父元素上使用 CSS 类: https://jsfiddle.net/ckyoxobp/

HTML

<div id="questions">
    <button id="toggle">Show all answers</button>
    <p>This is question 1.</p>
    <img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42">
    <p id="1" class="answer">This answer1.</p>
    <p>This is question 2.</p>
    <img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" width="42">
    <p id="2" class="answer">This answer2.</p>
</div>

JS

var questions = document.getElementById('questions');
var toggle = document.getElementById('toggle');

function toggleAll() {
  if (questions.classList.contains('show-all')) {
    questions.classList.remove('show-all');
    toggle.innerText = 'Show all answers';
  } else {
    questions.classList.add('show-all');
    toggle.innerText = 'Hide all answers';
  }
}

toggle.onclick = toggleAll;

CSS

#questions .answer {
  display: none;
}

#questions.show-all .answer {
  display: block;
}

更新

我应该更明确地说明浏览器兼容性；我只是想展示一个在父元素上使用类的示例。 Element.classList某些浏览器的某些版本不支持，尤其是 IE9 及更早版本，IE10 对它的支持有限。然而，Element.className几乎完全覆盖。

修改元素的类超出了这个问题的范围，但是this answer to a different question会给你一个好的开始。