我有以下花式盒代码：
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
问题是我在页面上有 20 个不同的 A 标记 ID，并且我希望fancybox href 属性采用被点击元素的 ID，即触发事件的那个。
我已经尝试了几件事，但都没有奏效！
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
这看起来很简单，但任何时候我插入“这个”或类似的东西都不起作用。
没有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（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>
并使用一个没有回调的简单脚本，如
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
看 JSFIDDLE
您可以遍历您的.fancybox项目集合并获取 id。
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
试试这个：
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
试试这个
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
你试过这个吗？
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});