如何为新的YT.Player()使用类而不是id

Question

在此处给出的示例中,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只是不好的做法,我更喜欢完全避免它们,因为类很好地工作并且没有奇怪的副作用.

Answer 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 - 循环NodeLists/Arrays