无论如何，是否可以强制所有样式“阻止”或“无”而不通过循环

Is there anyway to force all style to "block" or "none" without going through a loop?

本文关键字：阻止 循环 样式 是否 无论如何      更新时间：2023-09-26

好的，看这个代码

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

该代码意味着有很多问题，如果我们单击特定问题旁边的图像，答案将相应地出现。

现在，我想做一个按钮"全部显示"和"关闭全部"。当人们单击"全部显示"时，它将显示所有答案，当单击"关闭全部"时，它将关闭所有答案。

我的问题是

有没有办法强制页面内的所有元素在不经过循环的情况下具有"块"或"无"的样式？

您可以在父元素上使用 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="answerswer">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="answerswer">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 几乎完全覆盖。

修改元素的类超出了这个问题的范围，但这个对不同问题的回答会给你一个良好的开端。

相关文章：