用ID隐藏所有元素

Question

我想用id = showhide

隐藏所有元素

所以我将我的javascript设置为

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>
</body>

，然后我的按钮为

<a href="#" onclick="toggle_visibility('showhide');">
                            <button>Show / Hide Details</button>
                            </a>

然后我去了表格，但它只是隐藏此ID的第一个实例，而不是全部？

Answer 1

就像其他人提到的那样，您需要使用类而不是ID。getElementById仅返回一个元素，而getElementsByClassName将返回使用该类的所有元素(NodeList(的集合。我附上了一个片段，展示了代码的外观。

function toggle_visibility(className) {
  const elements = document.getElementsByClassName(className);
  for (const e of elements) {
    e.style.display = e.style.display === 'none' ? 'block' : 'none';
  }
}

<button onclick="toggle_visibility('showhide');">
  Show / Hide Details
</button>
<div class="showhide">A</div>
<div class="showhide">B</div>
<div class="showhide">C</div>

Answer 2

您无法将ID用于此目的。ID的意识形态必须是您的HTML中的单人。您可以例如使用class和document.getElementsByClassName或者，您可以使用一些特定属性，除了ID之外，您更令人信服。