javascript - 单击按钮上的类(class)不会立即全部关闭

Question

我正在构建的网络应用程序上有一个管理员用户表，我希望管理员能够让其他人成为管理员、验证和删除帐户。但是为了让它对移动设备友好，我想在移动设备上隐藏两列，同时也为用户提供一个按钮，让他们可以选择查看所有内容。问题是，需要按下三个按钮才能显示整个表格(实际上应该只有一个)，而且按钮不允许我反转操作。这是JS代码:

  const showTable = document.getElementById("showTable");
    
     showTable.addEventListener("click", function() {
     	const hiddens = document.getElementsByClassName("tableHide");
     	for (h of hiddens) {
     		if (h.classList.contains("tableHide")) {
     			h.classList.remove("tableHide");
     			showTable.innerText = "Hide Table";
     		} else {
     			h.classList.add("tableHide");
     		}
     	}
     });

.tableHide {
        display: none;
    }

    <button type='button' id='showTable'>Show Table</button>
    <table>
    <thead>
    <th>First Name</th>
    <th class='tableHide'>Last Name</th>
    <th class='tableHide'>Username</th>
    <th>Validated</th>
    <th>Admin</th>
    <th></th>
    </thead>
    <tbody>
    <tr id='1'>
    <td>Joe</td>
    <td class='tableHide'>Bob</td>
    <td class='tableHide'>joebob@gmail.com</td>
    <td><input type='checkbox' id='validated'><label for='validated'></label></td>
    <td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
    <td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
    </tr>
    <tr id='2'>
    <td>Bob</td>
    <td class='tableHide'>Joe</td>
    <td class='tableHide'>bobjoe@gmail.com</td>
    <td><input type='checkbox' id='validated'><label for='validated'></label></td>
    <td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
    <td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
    </tr>
    </tbody>
    </table>


    

还有一个有效的 JS 解决了这个问题:https://jsfiddle.net/7oh6rch3/1/
我的逻辑哪里搞砸了？

Answer 1

您的错误在于选择 HTML 元素的方式以及分配/删除 CSS 类的方式。我会使用两个 css 类来解决这个问题:

 const showTable = document.getElementById("showTable");
 showTable.addEventListener("click", function() {
 	const hiddens = document.getElementsByClassName("tableHide");
 	for (h of hiddens) {
 		if (h.classList.contains("mobile")) {
 			h.classList.remove("mobile");
 			showTable.innerText = "Hide Table";
 		} else {
 			h.classList.add("mobile");
 		}
 	}
    this.innerHTML = this.innerHTML == 'Show Table' ? 'Hide Table' : 'Show Table';
 })

.mobile
{
    display: none;
}

<button type='button' id='showTable'>Show Table</button>
<table>
<thead>
<th>First Name</th>
<th class='tableHide mobile'>Last Name</th>
<th class='tableHide mobile'>Username</th>
<th>Validated</th>
<th>Admin</th>
<th></th>
</thead>
<tbody>
<tr id='1'>
<td>Joe</td>
<td class='tableHide  mobile'>Bob</td>
<td class='tableHide  mobile'>joebob@gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
<tr id='2'>
<td>Bob</td>
<td class='tableHide mobile'>Joe</td>
<td class='tableHide mobile'>bobjoe@gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
</tbody>
</table>

还更新了你的 fiddle :

https://jsfiddle.net/7oh6rch3/2/