設置多個具有相同ID的div的CSS

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，以便再次顯示該ID時可以將其隱藏。 請參閱： iframe內容更改事件？

Answer 3

將ID更改為類之后（請閱讀此處的原因 ），您需要更新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插件，該插件可為每個幻燈片和片段播放單獨的音頻文件。 如果您的主要需求是此，則插件應為您完成這項工作。

你可以找到一個演示在這里和插件在這里 。 還有一個slideshow-recorder插件，可讓您錄制旁白。

阿斯文