jQuery FancyBox YouTubevideo无效

我有一种情况，我不能修改锚标记的HTML代码，但’href’属性除外。 因此，不能在锚标记中添加类。

HTML标记如下：

为了区分这个链接和其他链接，我在jQuery代码中添加了一个基于’href’的选择器。

代码如下：

 (function ($) { $('a[href*="youtube"]').fancybox({ 'padding' : 0, 'type' : 'swf', 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); e.preventDefault(); })(jQuery); 

这似乎根本不起作用。 谁能告诉我哪里出错了？ 我正在使用Drupal，因此为什么我在顶部添加了部分以启用’$’。

我在控制台中看不到任何错误，页面只是直接导航到YouTube页面而没有JavaScript干预。

Answer 1

 adding a class to the anchor tag is not an option 

这不一定是真的，因为你总是可以通过jQuery添加类

 $('a[href*="youtube"]').addClass("fancybox") 

无论如何，我个人不喜欢在youtubevideo中使用swf模式，但iframe模式; 这使它们更容易处理和跨平台兼容（包括iOS）

我要做的是，使用.each()方法：

• 使用javascript .replace()将每个单独的href转换为embed格式
• 将每个锚点绑定到fancybox
• 使用fancybox href API选项设置新转换的href

这是适用于fancybox v1.3.4或v2.x的代码：

 (function ($) { $(document).ready(function(){ $('a[href*=youtube]').each(function () { // convert youtube swf href to embed for iframe var thisHref = this.href .replace(new RegExp("watch\\?v=", "i"), 'embed/') .replace(new RegExp("&", "i"), '?'); // bind fancybox to each anchor $(this).fancybox({ "padding" : 0, "type" : "iframe", // add trailing parameters to href (wmode) "href" : thisHref + "&wmode=opaque" }); // fancybox }); // each }); // ready })(jQuery); 

请注意 ，我添加了wmode=opaque ，否则关闭按钮将位于youtubevideo的后面。

请参阅版本1.3.4的JSFIDDLE …或带有v2.1.4的JSFIDDLE

Answer 2

您已经错过了闭包内的doc ready处理程序，并且不需要e.preventDefault() ：

 (function ($) { $(function(){ $('a[href*="youtube"]').fancybox({ 'padding' : 0, 'type' : 'swf', 'href' : this.href.replace(/watch?v=/gi, 'v/'), 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); }); })(jQuery);