如何为 new YT.Player() 使用类而不是 id答案

【问题标题】：How can I use a class instead of id for new YT.Player()如何为 new YT.Player() 使用类而不是 id
【发布时间】：2015-10-23 16:25:55
【问题描述】：

在https://developers.google.com/youtube/iframe_api_reference 给出的示例中，您可以看到没有使用标准的 css 选择器语法，而是使用了一种似乎只引用 id 的自定义字符串语法。

<div id="player"></div>

// note no 'var' and yet this will work in strict mode
// since 'player' is being implicitly grabbed from the dom
player = new YT.Player('player', ...);

这当然会产生泄漏全局变量的问题，无论 id 被命名为什么，这是我试图避免的事情（因为它为严格模式创建了一个漏洞，并且只是令人困惑和意外的行为）。

一种解决方法是将名称连字符连接起来，这样就无法从全局空间访问它

<div id="js-player"></div>

// now window['js-player'] is guarded from accidental access
var player = new YT.Player('js-player', ...);

但最重要的是，使用 id 只是一种不好的做法，我更愿意完全避免使用它们，因为类可以很好地工作并且没有奇怪的副作用。

【问题讨论】：

标签： youtube-iframe-api

【解决方案1】：

答案可能有点晚了，但无论如何......

像这样传递选择器

var player = new YT.Player(
                 document.querySelector('.your-class'), 
                 ... API Stuff ...
             );

当然，您可以使用 jQuery 或任何其他 vanilla JS 方法来选择元素。

var player = new YT.Player(
                 $('.your-class')[0], 
                 ... API Stuff ...
             );

如果您使用返回节点列表的方法，请确保循环遍历项目，如下所示：Todd Motto - Looping Through NodeLists / Arrays

【讨论】：

链接失效
编辑：更新示例链接。