Javascript仅选择类中的一个元素

Question

我的文档中没有几个div类。 我想单击任何div类，并获得div元素的全屏显示。 目前，我只能使用document.getElementById("1")做到这一点。 而且我不想仅使用纯JavaScript来使用jQuery。

这是我的代码：

<html !DOCTYPE>
    <head>
        <title>Javascript trening</title>
        <style>
            .videoFrame{
                width:100px;
                height:100px;
                margin-bottom:10px;
                background:#000;
            }

            .videoFrame:nth-child(2){
                background:#cadaef;
            }

            .videoFrame:nth-child(3){
                background:#aed924;
            }

            .videoFrame:nth-child(4){
                background:#491356;
            }
        </style>
    </head>
    <body>

        <div class="videoFrame">
        </div>
        <div class="videoFrame" id="1">
        </div>
        <div class="videoFrame">
        </div>
        <div class="videoFrame">
        </div>
        <script type="text/javascript">

        var oneDoc = document.getElementById("1");
        oneDoc.onclick = fullScreenDiv;

        function fullScreenDiv(){
            if(oneDoc.requestFullscreen){
                oneDoc.requestFullscreen();
            } else if (oneDoc.mozRequestFullScreen){
                oneDoc.mozRequestFullScreen();
            } else if(oneDoc.webkitRequestFullscreen){
                oneDoc.webkitRequestFullscreen();
            } else if (select.msRequestFullscreen) {
                oneDoc.msRequestFullscreen();
            }

        }

    </script>
    </body>
</html>

Answer 1

您可以在body或任何其他父元素上定义单击处理程序。 当您单击任何子元素时，将触发该处理程序。 然后只需检查目标元素，看看它是否具有您要从中触发的类。

下面有一个例子。 该事件在任何videoFrame元素上触发，但在另一个元素上未触发。

 var body = document.querySelector("body"); body.addEventListener("click", function(e) { var target = e.target; if (hasClass(target, "videoFrame")) { fullScreenDiv(target); } else { alert("not this one"); } }) function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function fullScreenDiv(oneDoc){ if(oneDoc.requestFullscreen){ oneDoc.requestFullscreen(); } else if (oneDoc.mozRequestFullScreen){ oneDoc.mozRequestFullScreen(); } else if(oneDoc.webkitRequestFullscreen){ oneDoc.webkitRequestFullscreen(); } else if (select.msRequestFullscreen) { oneDoc.msRequestFullscreen(); } }

 .videoFrame{ width:100px; height:100px; margin-bottom:10px; background:#000; } .videoFrame:nth-child(2){ background:#cadaef; } .videoFrame:nth-child(3){ background:#aed924; } .videoFrame:nth-child(4){ background:#491356; } .notThisOne { width:100px; height:100px; margin-bottom:10px; background:#F00; }

 <div class="videoFrame"> </div> <div class="videoFrame" id="1"> </div> <div class="videoFrame"> </div> <div class="videoFrame"> </div> <div class="notThisOne"></div>

Answer 2

document.getElementsByClassName('videoFrame')[index] ，其中index是您要访问的div（当然，从0开始），因此在您的情况下，索引为1

文档对象上有很多方法可以选择DOM元素，除了getElementById和querySelector返回元素的nodeList（类似于数组）之外，所有其他方法都必须通过指定索引来访问感兴趣的元素

如果要将事件处理程序添加到所有这些div中，则必须遍历此nodeList：

var videoFrames = document.getElementsByClassName('videoframe');
for(int i = 0; i < videoFrames.length; i++) {
     videoFrames[i].onclick = //event handler
}

Javascript仅选择类中的一个元素

问题描述

这是我的代码：

2 个解决方案

解决方案1
1 已采纳 2015-03-13 18:18:19

解决方案2
0 2015-03-13 18:00:25

Javascript仅选择类中的一个元素

问题描述

这是我的代码：

2 个解决方案

解决方案1 1 已采纳 2015-03-13 18:18:19

解决方案2 0 2015-03-13 18:00:25

解决方案1
1 已采纳 2015-03-13 18:18:19

解决方案2
0 2015-03-13 18:00:25