javascript - 设置多个具有相同id的div的css

Question

我在 iframe 中有一个显示演示文稿。每张幻灯片都有一个 div，其中有一个音频播放器，div id 是“narration”。

我在框架外有一个按钮，用于隐藏/显示此 div。问题是它只对第一张幻灯片执行此操作，而不对其余幻灯片执行此操作。

编辑:这似乎隐藏了 div :

function checkAudio() {
        if (document.getElementById('cb1').checked) {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'none';
}
        } else {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'block';
        }
    }
 }

iframe 中的 HTML(每张幻灯片都有一个):

<div id="narration"><p align="middle">
    <audio controls="" preload="none">
        <source src="mp3/2.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio></p>
</div>

JS(iframe 之外):

 function checkAudio() {
     if (document.getElementById('cb1').checked) {
         document.getElementById('ppt').contentWindow.document.getElementById('narration').style.display = 'none';
     } else {
         document.getElementById('ppt').contentWindow.document.getElementById('narration').style.display = 'block';
     }
 }

Answer 1

将 ID 更改为类 ( read here why ) 后，您需要更新 javascript 代码以通过 foreach 处理多个 div循环。

function checkAudio() {
    var narrationDivs = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
    var newDisplay = "block";

    if (document.getElementById('cb1').checked) {
        newDisplay = "none";
    }

    narrationDivs.forEach(function(div) {
        div.style.display = newDisplay;
    });
}

为了让代码在 iframe 更改时再次运行，您需要更新 iframe 更改函数:

function setURL(url){ 
    document.getElementById('ppt').src = url; 
    checkAudio(); // Just run the function again!
}