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>

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

现在，我想制作一个按钮＆＃34; 显示全部＆＃34; ＆安培; ＆＃34; 关闭所有＆＃34;。当人们点击＆＃34; 显示全部＆＃34;它将显示所有答案，当点击＆＃34; 关闭所有＆＃34;时，它将关闭所有答案。

我的问题是

无论如何都要强制页面内的所有元素都具有＆＃34; block＆＃34;或＆＃34;无＆＃34;没有经过循环？

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

<强>更新

我应该更清楚地了解浏览器兼容性;我只是想展示一个在父元素上使用类的例子。某些浏览器的某些版本（尤其是IE9及更早版本）不支持Element.classList，而且IE10对它的限制有限。但是，Element.className几乎完全覆盖了。

修改元素的类超出了本问题的范围，但this answer to a different question将为您提供良好的开端。

无论如何，强迫所有风格到＆＃34;阻止＆＃34;或＆＃34;无＆＃34;没有经过循环？

1 个答案: