Javascript 可以使用getElementByID显示多个div包装器的内容吗

我使用getElementById切换html中块的显示。我正在切换的块被包装在一个div中，如下所示：

<div id="SunMotion">
    <br>
    <p>
      Toggle the switch to run "24HourCycle.py"
    </p>
    <label class="switch">
      <input id="check3" type="hidden">
      <article>
        <button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
      </article>
    </label>
  </div>

这很好，直到我尝试用不同的块做同样的事情。使用特定于该按钮的新功能：

<button class="button button1" onclick="SunMotion()">
            Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
            Hologram Shapes
</button>
<br>
    <div id="Hologram">
        <br>
        <p>
        Toggle the switch to run the Hologram program
        </p>
        <label class="switch">
        <div class="grid-container">
            <input id="check12" type="hidden">
            <div class="grid-container">
                <div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
            <input id="check13" type="hidden">   

        </label>
    </div>
<br>
    <div id="SunMotion">
        <p>
        Toggle the switch to run "24HourCycle.py"
        </p>
        <label class="switch">
        <input id="check3" type="hidden">
        <article>
            <button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
        </article>
        </label>
    </div>
<br>

<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
  var x = document.getElementById("Hologram");
  if (x.style.display === 'none') {
        x.style.display = 'inline';
  } else {
    x.style.display = 'none';
    document.getElementById("Hologram").checked = false;
  }
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
  var x = document.getElementById("SunMotion");
  if (x.style.display === 'none') {
        x.style.display = 'inline';
  } else {
    x.style.display = 'none';
    document.getElementById("SunMotion").checked = false;
  }
}

</script>

太阳运动
全息图形状





切换开关以运行全息图程序

红色



切换开关以运行“24HourCycle.py”

24小时循环


document.getElementById（“全息图”）.style.display='none'；
函数全息图（）{
var x=document.getElementById（“全息图”）；
如果（x.style.display=='none'）{
x、 style.display='inline'；
}否则{
x、 style.display='none'；
document.getElementById（“全息图”）.checked=false；
}
}
document.getElementById（“SunMotion”）.style.display='none'；
函数SunMotion（）{
var x=document.getElementById（“SunMotion”）；
如果（x.style.display=='none'）{
x、 style.display='inline'；
}否则{
x、 style.display='none'；
document.getElementById（“SunMotion”）.checked=false；
}
}

如果要在另一个div上使用该函数，则需要改用getElementByClass。你可以查一下 或者，如果仍然要使用id，只需将该id作为参数发送即可

function SunMotion(id) {
var x = document.getElementById(id);
 if (x.style.display === 'none') {
   x.style.display = 'block';
 } else {
   x.style.display = 'none';
   document.getElementById(id).checked = false;
 }
}

要调用它，只需将Id粘贴到该函数

<button class="button button1" onclick="SunMotion('SunMotion')">
    Motion of the Sun
</button>

---

请注意，我正在更改“by'in parameter.

你能提供一个例子，说明你曾尝试对不同的块执行相同的操作吗？是的，因此我使用了一个新的功能，该功能特定于每个按钮，因此，对于两个按钮，我有两个功能。我编辑了原件供您查看。很抱歉，我无法将id用作参数。你能给我再举一个例子吗？

function SunMotion(id) {
var x = document.getElementById(id);
 if (x.style.display === 'none') {
   x.style.display = 'block';
 } else {
   x.style.display = 'none';
   document.getElementById(id).checked = false;
 }
}

<button class="button button1" onclick="SunMotion('SunMotion')">
    Motion of the Sun
</button>

onclick="SunMotion('SunMotion')"