Question

我在iframe中有一个透露演示文稿。每个幻灯片都有一个带有音频播放器的div，而div的id是“旁白”。

我在框架外面有一个用于隐藏/显示此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。如果要使用单个按钮显示所有项目，则应使用类。您还可以使用类来显示特定元素，例如：第5个按钮将显示第5个元素，但这不是一个好的样式。

Answer 2

当iframe中的网站加载下一帧时，您的代码并不知道要再次隐藏它所呈现的div。您需要处理事件。

您需要轮询ID，以便如果再次显示，您可以隐藏它。请参阅：iframe contents change event?

Answer 3

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

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和插件here。还有slideshow-recorder插件，可以让您录制您的旁白。

Asvin

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

5 个答案: