html - 在多个 div 上实现切换

Question

我有一个div我想在按钮单击时切换显示。

这是 HTML 结构：

<div>
<button onclick="toggle()"> Show </show>
<div id="toggle"> </div>
</div>

这个脚本是：

var div = document.getElementById("toggle");
if(div.style.display=="none" ||div.style.display == ""){
    div.style.display="block"   }
else{
    div.style.display="none";
    }

这工作正常，但我有多个按钮-div 组合？显然我将不得不id为每个 div 使用不同的，但我将如何id在函数中得到它？或者还有其他方法吗？

这也是正确的方法吗？为每个 div 使用多个 id？有没有其他方法可以实现这样的系统？

Answer 1

function toggle(id) {
    var div = document.getElementById(id);
    if(div.style.display=="none" ||div.style.display == ""){
        div.style.display="block"   }
    else{
        div.style.display="none";
    }
}

在你的 HTML 中

<div>
<button onclick="toggle('toggle')"> Show </show>
<div id="toggle"> </div>
</div>