设置 css 个具有相同 ID 的多个 div

Question

我在 iframe 中有一个显示演示文稿。每张幻灯片都有一个 div，里面有一个音频播放器，div 的 ID 是 "narration"。

我在框架外有一个按钮，用来hide/show这个div。问题是它只对第一张幻灯片执行此操作，而不对其余幻灯片执行此操作。

编辑：这似乎隐藏了 divs：

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';
        }
    }
 }

HTML in iframe（每张幻灯片有一个）：

<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。如果您想使用一个按钮显示所有项目，您应该使用类。您还可以使用类来显示特定元素，例如：第 5 个按钮将显示第 5 个元素，但这不是一个好的样式。

Answer 2

当 iframe 中的站点加载下一帧时，您的代码不知道要隐藏它再次显示的 div。您需要一个事件来处理。

您需要轮询该 ID，以便在它再次出现时隐藏它。参见：iframe contents change event?

Answer 3

将您的 ID 更改为类后（read here why), you need to update your javascript code to handle the multiple divs via a foreach 循环。

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!
}

Answer 4

 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';
        }
    }
 }

Answer 5

您可能还想查看 audio-slideshow 插件，它允许为每张幻灯片和片段播放单独的音频文件。如果您的主要需求是这个，插件应该为您完成这项工作。

您可以找到一个演示 here and the plugin here。还有 slideshow-recorder 插件可以让你录制你的旁白。

阿斯文

设置 css 个具有相同 ID 的多个 div

Set css of multiple divs with same id

html

javascript

reveal.js