Question

这是我的HTML：

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&#38;fs=1">Arbitrary text</a>

这是Fancybox javascript：

<script type='text/javascript'>  
  $(document).ready(function(){  
    $("a.video").fancybox({  
      'href'    : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),  
      'type'    : 'swf',  
      'swf'     : {  
        'wmode' : 'transparent',  
        'allowfullscreen': 'true'  
      }  
    });  
    return false;  
  });
</script>

Firebug控制台说：

this.href is undefined  
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),

因此，点击此链接会将用户带到YouTube并且不会触发Fancybox。将有问题的行更改为'href' : this.href.replace(new RegExp("watch?v=", "i"), 'v/'),这对我来说更正确，会产生相同的结果。

有什么建议吗？

编辑：我调整了我的脚本，只包括与我的问题相关的部分。

Answer 1

脚本标记应如下所示

<script type='text/javascript'>
$(document).ready(function(){
    $("a.video").click(function() {
        $.fancybox({
                'padding' : 0,
                'autoScale' : false,
                'title' : this.title,
                'overlayOpacity' : '.6',
                'overlayColor' : '#333',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'centerOnScroll' : false,
                'showCloseButton' : true,
                'hideOnOverlayClick': false,
                'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type' : 'swf',
                'swf' : {
                'wmode': 'transparent',
                'allowfullscreen': 'true'
                }
        });
        return false;
    });
});
</script>

网址应如下所示将＆amp; fs = 1 添加到其末尾

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&fs=1">Arbitrary text</a>

Answer 2

this.href，在该上下文中，指的是文档，而不是锚。

$("a.video").fancybox({
    'padding' : 0,
    'autoScale' : false,
    'title' : this.title,
    'overlayOpacity' : '.6',
    'overlayColor' : '#333',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'centerOnScroll' : false,
    'showCloseButton' : true,
    'hideOnOverlayClick': false,
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    'type' : 'swf',
    'swf' : {
        'wmode': 'transparent',
        'allowfullscreen': 'true'
    }
});

同样写作：

var options = {
    'padding' : 0,
    'autoScale' : false,
    'title' : this.title,
    'overlayOpacity' : '.6',
    'overlayColor' : '#333',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'centerOnScroll' : false,
    'showCloseButton' : true,
    'hideOnOverlayClick': false,
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    'type' : 'swf',
    'swf' : {
        'wmode': 'transparent',
        'allowfullscreen': 'true'
    }
};
$("a.video").fancybox(options);

锚在这种情况下不可用。

一种选择是将代码包装在每个块中

$("a.video").each(function(function(index, value)) {
   var obj = $(value);
   obj.fancybox({
        'padding' : 0,
        'autoScale' : false,
        'title' : this.title,
        'overlayOpacity' : '.6',
        'overlayColor' : '#333',
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'centerOnScroll' : false,
        'showCloseButton' : true,
        'hideOnOverlayClick': false,
        'href' : value.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type' : 'swf',
        'swf' : {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });
});

Fancybox iframe表示我的YouTube href未定义

2 个答案: