Question

我正在尝试弹出一个包含视频的窗口。但使用getElementById并不适用于使用相同代码的多个视频。我正在尝试使用getElementByClass但它并不适合我。我错过了什么？提前谢谢。

工作代码

    var overlay = document.getElementById('overlay');

    function openModal() {
    overlay.classList.remove("is-hidden");
    }

    function closeModal() {
     overlay.classList.add("is-hidden");
    }

我想做什么（不工作）：

    var overlay = document.getElementsByClassName('overlay');

我的HTML：

    <a class="buttonPlay" onclick="openModal();" href="#" style="visibility:visible;color:#ffffff;font-size:24px;">Play movie</a>

                <div class="overlay is-hidden" id="overlay">

                    <a href="/" class="cancel">&times;</a>

                    <div class="video-responsive" style="overflow: visible; padding-bottom: 56.25%; position: relative; height: 0; top: 20%; left: 20%;">
                        <iframe src="@videoSrc" width="500" height="281" style=" left: 0; top: 0; height: 60%; width: 60%; position: absolute; " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>

Answer 1

.getElementsByClassName返回节点列表，I.E。一个类似于数组的对象，包含与传递的查询匹配的所有DOM元素。

如果要更改返回元素的属性，可以循环遍历它们：

function openModal() {
    for(var i = 0; i < overlay.length; i++){
        overlay[i].classList.remove("is-hidden");
    }
}

或者，您可以定位集合中的特定元素：

overlay[0].classList.remove("is-hidden"); // First match

JSFiddle

getElementByClass不起作用

1 个答案: