gpt4 book ai didi

javascript - 如何使 fancybox href 动态化?

转载 作者:数据小太阳 更新时间:2023-10-29 04:21:58 25 4
gpt4 key购买 nike

我有以下花式框代码:

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

//some other callbacks etc

问题是我在页面上有二十个不同的 A 标签 ID,我希望 fancybox href 属性采用被点击元素的 ID,即触发事件的元素。

我试了好几样东西,都没用!

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

这看起来很简单,但任何时候我插入“this”或类似的东西都不起作用。

最佳答案

如果没有 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 属性表示其用途。


编辑:最好是在 anchor 中使用特殊的 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

关于javascript - 如何使 fancybox href 动态化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11618221/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com