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为＆＃34; 1＆＃34;的图像时什么都没发生。我希望它发生的是，所有id为2-9的元素都会消失，而具有id＆＃34; form_1＆＃34;的元素将会消失。和＆＃34; form_1_b＆＃34;出现。 点击＆＃34; 1＆＃34;再次应该恢复一切。

编辑：

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

在第二个else if声明中使用if。

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

Answer 2

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

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

你犯了经典的重复错误。