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添加到表中，但这只是隐藏该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中的SINGLUAR。例如，您可以使用类和document.getElementsByClassName 或者，您可以使用一些特定的属性，除了ID之外，更方便您使用。

Answer 3

更好的方法是使用getElementsByClassName()：

function toggle_visibility(class) {
var elements = getElementsByClassName("showhide");
for (e of elements) {
    if (elements[e].style.display == "block") {
          elements[e].style.display = "none";
    }else {
          element[e].style.display = "block";
    }
}
}

并将该类添加到行或您希望按钮切换可见性的任何内容。

隐藏所有具有ID的元素

3 个答案: