如何隐藏？

Question

所以我有这些代码（只有必要的部分） 这是按钮的位置：

<td id="Assault">
<button onclick="hideassault()">Assault</button>
</td>

<td id="AssaultWP">

所有这些图像（实际上都是按钮）都在表格单元格中，并且它们都具有相同的ID

#AssaultWP{
display:block;
}

这个非常简单的css也很重要

以及我认为可行的脚本：

function hideassault() {
var hideA = document.getElementById("AssaultWP");
if (hideA.style.display === "none") {
    hideA.style.display = "block";
} else {
    hideA.style.display = "none";
}
}

我认为既然所有td都有相同的ID，它会隐藏所有这些ID，但它实际上只隐藏了第一个单元格，随之而来的是我的问题： 如果它们具有相同的ID，它不应该隐藏所有单元格吗？我做错了什么？有人可以帮我做吗？ 感谢您提前提供任何帮助！

Answer 1

让我帮忙，首先请记住，您正在使用td，但从未定义其父元素table，因此这将是第一个修复。

示例：

<table>
 <tr> 
   <th>Header</th> <!-- table header -->
 </tr>

 <tr>
   <td>data/information</td> <!-- table data/information -->
 </tr>
</table>

第二个问题就像我昨天评论的那样，id是一个唯一的标识符。如果all都是同一个名，请使用类。

然后导致第三个问题，document.getElementsByClassName返回数组类型object = HTMLCollection。

因此，在这种情况下querySelectorAll将帮助您按类名选择每个元素。

示例：

＆＃13;

＆＃13;

function hideAssault() {
[].forEach.call(document.querySelectorAll('.assault_r'), function (sh) {

  if (sh.style.display === "none") {
    sh.style.display = "table-cell"; //block , not preffered , but up to you
  } else {
    sh.style.display = "none";
  }
  
});
}

＆＃13;

table, th, td {
    border: 1px solid black;
}

td {
    display: table-cell; /* block , not preffered , but up to you*/
}

＆＃13;

<table>
  <tbody>
  <tr>
    <td>
      <button onclick="hideAssault()">Assault</button>
    </td>
  </tr>

  <tr>
    <td class="assault_r">Assault</td>
    <td class="assault_r">Assault2</td>
    <td class="assault_r">Assault3</td>
    <td class="assault_r">Assault4</td>
    <td class="assault_r">Assault5</td>
    <td class="assault_r">Assault6</td>
    <td class="assault_r">Assault7</td>
  </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的意思是独一无二的。在这种情况下使用类，你必须处理多个东西。 我假设您已将班级名称命名为“AssaultWP＆＃39;”。 js函数看起来像

function hideassault() {
  var hideA = document.getElementsByClassName("AssaultWP");
  var n = hideA.length;
  if (document.getElementsByClassName("AssaultWP")[0].style.display === "none") {
    for(i=0;i<n;i++){
      hideA[i].style.display = "block"; 
    }
  } else {
    for(i=0;i<n;i++){
      hideA[i].style.display = "none"; 
    }
  }
}

这是fiddle。