Javascript 具有多个按钮的document.getElementById

我有六个按钮，我想在一个功能。每个按钮都有一个不同的div，如果我点击第三个按钮，那么应该弹出第三个按钮的div

javascript:

function kfunc(){
    var x = document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6")
    x.style.display = 'block';
    x;
}

function closefunc(){
    document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6").style.display = 'none';
}

function testfunc(){
    alert("test");
}

HTML:

Küche
坏的
沃恩齐默
梅丽娜
克莱恩斯坏
施拉夫齐默
X
ab
X
A.
X
A.
X
A.
X
A.
X
A.

---

它几乎可以工作！从逻辑上讲，当有id1可用时，它将使用id1而不是其他。我怎样才能修好它？就像我说的：当点击btn3时，应该会显示id3的div，但它总是显示id1。

看看你的javascript。实际上，您不需要为按钮设置id属性

只需将您的帧id作为参数添加到

kfunc

和

closefunc

函数中即可。像这样：

function kfunc(id) { 
    console.log(id)
    document.getElementById(id).style.display = 'block'
}

function closefunc(id) {
    console.log(id)
    document.getElementById(id).style.display = 'none'
}

用法：

onclick="kfunc('id1')"
onclick="closefunc('id1')"

---

---

注意：我的解决方案未经测试。希望您能理解。

看看您的javascript。实际上，您不需要为按钮设置id属性

只需将您的帧id作为参数添加到

kfunc

和

closefunc

函数中即可。像这样：

function kfunc(id) { 
    console.log(id)
    document.getElementById(id).style.display = 'block'
}

function closefunc(id) {
    console.log(id)
    document.getElementById(id).style.display = 'none'
}

用法：

onclick="kfunc('id1')"
onclick="closefunc('id1')"

---

---

注意：我的解决方案未经测试。希望您能理解。

如果您将html更改为在按钮中包含数据属性，并在onClick函数调用中传递“this”

<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>

---

至于关闭按钮。如果给所有div一个公共类，您可以一次将它们全部隐藏。

如果您将html更改为在按钮中包含数据属性，并在onClick函数调用中传递“this”

<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>

---

至于关闭按钮。如果给所有div一个公共类，可以一次隐藏它们。

不能像这样使用getElementById。您应该使用getElementByClassName，也可以使用以下代码：

函数kfunc（id）{
var btn=id；
document.getElementById（id）.style.display='block'；
}
函数closefunc（id）{
var selectedDiv=id；
document.getElementById（id）.style.display='none'；
}
函数testfunc（）{
警报（“测试”）；
}

div[class^=“frame”]{
显示：无；
}

Küche
坏的
沃恩齐默
梅丽娜
克莱恩斯坏
施拉夫齐默
X
ab
X
A.
X
A.
X
A.
X
A.
X
A.

不能像这样使用getElementById。您应该使用getElementByClassName，也可以使用以下代码：

函数kfunc（id）{
var btn=id；
document.getElementById（id）.style.display='block'；
}
函数closefunc（id）{
var selectedDiv=id；
document.getElementById（id）.style.display='none'；
}
函数testfunc（）{
警报（“测试”）；
}

div[class^=“frame”]{
显示：无；
}

Küche
坏的
沃恩齐默
梅丽娜
克莱恩斯坏
施拉夫齐默
X
ab
X
A.
X
A.
X
A.
X
A.
X
A.

此外：我想我必须使用数组。您可以像本文档一样使用单引号。getElementById（'id1'| |'id2'| |'id3'| |'id4'| |'id5'| |'id6'）为什么不使用数组而传入id？另外，请看示例：我想我必须使用arrayscan您可以像此文档一样使用单个引号。getElementById（'id1'| | id2'| | | id3'| | id4'；'id5'| | id6'），为什么不传入id而不是使用数组？请看本例中的示例，它仅适用于第一个按钮。其他5个按钮什么也不做。我只给出了前两个按钮的示例，您只需要向其他每个按钮添加data div=“DivID”。但老实说，韩寒的回答更优雅；d这只适用于第一个按钮。其他5个按钮什么也不做。我只给出了前两个按钮的示例，您只需要向其他每个按钮添加data div=“DivID”。但老实说，韩寒的回答更优雅；d这只适用于第一个按钮。其他5个按钮什么也不做。运行代码段。它适用于所有按钮。我在寄出之前已经检查过了。希望它也能为你工作。这只适用于第一个按钮。其他5个按钮什么也不做。运行代码段。它适用于所有按钮。我在寄出之前已经检查过了。希望它也能为你工作。这只适用于第一个按钮。其他5个按钮不起任何作用。请在单击参数时更改其他按钮。”id1'到“id2”或“id3”或任何要附加到按钮的帧id。我这样做了，但其他5没有发生任何变化。你想看我的完整代码吗？啊，我修好了。在我的CSS文件中，只有frame_Kuecheth的一个类，它只适用于第一个按钮。其他5个按钮不起任何作用。请在单击参数时更改其他按钮。”id1'到“id2”或“id3”或任何要附加到按钮的帧id。我这样做了，但其他5没有发生任何变化。你想看我的完整代码吗？啊，我修好了。在我的CSS文件中，只有frame_kueche的一个类