Javascript 隐藏/显示多个元素

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

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

如果它不是 else if 那么它会说它是否等于 inline？然后将其设置为 none。它等于 none 吗？是的，因为它只是将其更改为它，所以将其更改回 inline。Else if 表示如果第一个 if 为 true 则不会执行此操作。