Question

我有以下fancybox代码：

$('.fancybox').fancybox({
             'autoScale' : false,
             'href' : $('.fancybox').attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,

//some other callbacks etc

问题是我在页面上有20个不同的A标签id，我希望fancybox href属性获取被点击元素的id，即触发事件的id。

我尝试了几件事，但都没有效果！

'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),

这看起来很简单，但无论何时我插入'this'或类似的东西都无效。

Answer 1

如果没有each()或click()，只需将beforeLoad回调添加到您的脚本

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

注意：这适用于fancybox v2.0.6 +

另一方面，更强大的优雅解决方案是使用（HTML5）data-*属性来设置href（设置{{1}会很奇怪否则）所以你可以这样做：

id="images/01.jpg"

和你的回调

<a href="#" id="id01" data-href="images/01.jpg" ...

并使用beforeLoad: function(){ var url= $(this.element).data("href"); this.href = url }属性来表示意图。

编辑：最好是使用锚中的特殊id属性，如：

data-fancybox-href

并使用一个没有回调的简单脚本，如

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery"  href="javascript:;">jsfiddle</a>

参见 JSFIDDLE

Answer 2

您可以遍历您的.fancybox项目集合并获取ID。

$('.fancybox').each(function(){
    $(this).fancybox({
             'autoScale' : false,
             'href' : $(this).attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
             //some other callbacks etc
    });
});

Answer 3

试试这个：

$(".fancybox").click(function(){
    var url = $(this).attr('id');
    $.fancybox({
         'autoScale' : false,
         'href' : url ,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
         //some other callbacks etc
    });
})

Answer 4

试试这个

$('.fancybox').each( function() {
    var elem = jQuery(this);
    elem.fancybox({
             'autoScale' : false,
             'href' : elem.attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
          });
    }
);

Answer 5

你试过这个吗？

$('.fancybox').each(function(){
    $(this).fancybox({
         'autoScale' : false,
         'href' : this.id,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
          //some other callbacks etc
    });
});

如何让fancybox href动态化？

5 个答案: