0

我有一种情况，我无法修改锚标记的 HTML 代码，但“href”属性除外。因此，将类添加到锚标记不是一种选择。

HTML 标记如下：

<a href="http://www.youtube.com/watch?v=#########&amp;autoplay=1"></a>

为了区分这个链接和其他链接，我在 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 干预。

4

2 回答 2

2 
adding a class to the anchor tag is not an option

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

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

无论如何，就我个人而言，我不再喜欢使用该swf模式来播放 youtube 视频，而是iframe使用模式；这使它们更易于处理和跨平台兼容（包括 iOS）

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

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

这是适用于 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 + "&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

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

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

于 2013-03-31T19:49:52.233 回答
0

您错过了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);
于 2013-03-31T16:01:12.293 回答