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意味着它不会这样做。

Answer 2

考虑用“内联”替换（'inline'）。 删除引号。

例如： document.getElementById（“3”）。style.display =“inline”;

你犯了经典的重复错误。