如何使fancybox href动态化？
我有以下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’或类似的东西都没有用。
如果没有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"看起来很奇怪），所以你可以这样做：
和你的回调
beforeLoad: function(){ var url= $(this.element).data("href"); this.href = url }
并使用id属性来实现目的。
编辑 ：最好是在你的锚中使用特殊的data-fancybox-href属性，如：
jsfiddle
并使用一个没有回调的简单脚本
$(".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 }); });