Javascript Hide/Show 多个元素

Question

我的代码不工作：

JS:

function openform_1() {
var a = document.getElementById("2");

if (a.style.display === "inline") {
document.getElementById("form_1").style.display = ("inline");
document.getElementById("form_1_b").style.display = ("inline");
document.getElementById("2").style.display = ("none");
document.getElementById("3").style.display = ("none");
document.getElementById("4").style.display = ("none");
document.getElementById("5").style.display = ("none");
document.getElementById("6").style.display = ("none");
document.getElementById("7").style.display = ("none");
document.getElementById("8").style.display = ("none");
document.getElementById("9").style.display = ("none");
}
if (a.style.display === "none") {
document.getElementById("form_1").style.display = ("none");
document.getElementById("form_1_b").style.display = ("none");
document.getElementById("2").style.display = ("inline");
document.getElementById("3").style.display = ("inline");
document.getElementById("4").style.display = ("inline");
document.getElementById("5").style.display = ("inline");
document.getElementById("6").style.display = ("inline");
document.getElementById("7").style.display = ("inline");
document.getElementById("8").style.display = ("inline");
document.getElementById("9").style.display = ("inline");    
}}

HTML:

    <img src="img/edit.png" width="15" height="15" class="edit"id="1" onclick="openform_1()">    
    <img src="img/edit.png" width="15" height="15" class="edit" id="2" onclick="openform_2()">
    ...

CSS:

.edit {display: inline;}

当我点击 ID 为“1”的图片时，没有任何反应。我希望它发生的是所有 id 为 2-9 的元素都消失，而 id 为 "form_1" 和 "form_1_b" 的元素出现。再次单击“1”应该会恢复所有内容。

编辑：

function openform_2() {
var a = document.getElementById("1");

if (a.style.display === "inline") {
document.getElementById("form_2").style.display = "inline";
document.getElementById("form_2_b").style.display = "inline";
document.getElementById("1").style.display = "none";
document.getElementById("3").style.display = "none";
document.getElementById("4").style.display = "none";
document.getElementById("5").style.display = "none";
document.getElementById("6").style.display = "none";
document.getElementById("7").style.display = "none";
document.getElementById("8").style.display = "none";
document.getElementById("9").style.display = "none";
}
if (a.style.display === "none") {
document.getElementById("form_2").style.display = "none";
document.getElementById("form_2_b").style.display = "none";
document.getElementById("1").style.display = "inline";
document.getElementById("3").style.display = "inline";
document.getElementById("4").style.display = "inline";
document.getElementById("5").style.display = "inline";
document.getElementById("6").style.display = "inline";
document.getElementById("7").style.display = "inline";
document.getElementById("8").style.display = "inline";
document.getElementById("9").style.display = "inline";  
}}

这是它在浏览器中的样子：

点击次数：

这是我单击一次时的样子。

Answer 1

考虑用 "inline" 替换 ('inline')。删除引号。

例如： document.getElementById("3").style.display = "inline";

您犯了经典的重复性错误。

Answer 2

在第二个 if 语句中使用 else if。

如果它不是 else if 那么它会说它等于 inline 吗？然后将其设置为 none。它等于 none 吗？是的，因为它只是将其更改为它，所以将其更改回 inline。 Else if 表示如果第一个 if 是 true 就不会这样做。

Javascript Hide/Show 多个元素

Javascript Hide/Show multiple elements

javascript

getelementbyid

display