将 document.getElementById 更改为 getElementsByClassName答案

【问题标题】：Chaging document.getElementById to getElementsByClassName将 document.getElementById 更改为 getElementsByClassName
【发布时间】：2015-07-30 22:59:46
【问题描述】：

我有以下函数，我想使用“暂停”类而不是 id。我确实看到了一些关于此的主题，但是我不太明白这将如何工作。谢谢！！！

       function onPlayerReady(event) {
            document.getElementById('pause').onclick = function() {
                youtubePlayer1.pauseVideo();
                youtubePlayer2.pauseVideo();
                youtubePlayer3.pauseVideo();
                e.preventDefault();
            };
        };

【问题讨论】：

复制了很多帖子，例如this
document.getElementsByClassName() 返回一个数组，因此如果您的元素是唯一具有该类名的元素，您将在第零索引处获取该元素并执行您正在执行的任何操作。在 JQuery 中，这要容易得多：$( "#classname" ).click(function() { /*your code here*/ });

标签： javascript jquery class

【解决方案1】：

使用 jQuery，您可以将点击处理程序附加到所有具有暂停类的元素。

    $(".pause").on("click", function () {
            youtubePlayer1.pauseVideo();
            youtubePlayer2.pauseVideo();
            youtubePlayer3.pauseVideo();
            e.preventDefault();
    });

【讨论】：

【解决方案2】：

您可以从名称中猜到，getElementsByClassName() 函数可以返回多个（或零个）结果。这是因为元素 id 必须是唯一的，但许多不同的元素可以具有相同的类。

所以你需要做的就是迭代结果并像以前一样添加点击处理程序：

function onPlayerReady(event) {
    var elem = document.getElementById('pause')
    for(var i in elem) {
        elem[i].onclick = function() {
            youtubePlayer1.pauseVideo();
            youtubePlayer2.pauseVideo();
            youtubePlayer3.pauseVideo();
            e.preventDefault();
        }
    }
};

即使您只期望一个结果，也应该这样做以防止错误。

【讨论】：