2

我有一个打开 Fancybox 框的链接，如下所示：

<a class="fancybox" rel="gallery" href="<?php echo $image_src; ?>" data-id="<?php echo $post->ID; ?>">

该链接的data属性填充了id如上所示。我想让数据属性在 Fancybox 辅助函数中可用。我尝试$(this.element).data('id')在下面的代码中使用：

helpers: {
    title: {
        type: 'over'
    },
    buttons: {
        position: 'bottom',
        tpl: '<div id="fancybox-buttons"><ul> \
                                            <li class="button"><a class="test-btn" data-id="' + $(this.element).data('id') + '" href="#"></a></li> \
                                        </ul></div>'
    }
}

但是它不起作用。获取数据属性总是undefined在辅助函数中返回。我如何让这个工作。

4

3 回答 3

4

@meagar 提出了一个很好的解决方案，通常适用于大多数人。但是，由于用于调用 Fancybox 的链接是通过 Ajax 请求加载到页面上的，因此他的解决方案对我不起作用。我通过声明一个全局变量然后将 的值传递$(this.element).data('id')给 FancyboxafterLoad回调中的全局变量来解决它。

afterLoad : function() {
    my_global_var = $(this.element).data('id');
}

然后我简单地使用了辅助选项中的全局变量。

于 2012-07-08T18:56:24.837 回答
2

$(this.element).data('id')在您绑定回调时正在评估。this将是您打电话时所处的任何环境$.fancybox。

如果您将 Fancybox 绑定到锚标记，则您已经选择了该锚标记。像这样的东西应该工作：

$('a.fancybox').each(funcion () {
  var $a = $(this);
  $a.fancybox({ tpl: "..." + $a.data('id') + "..." });
});
于 2012-06-21T14:56:08.513 回答
0

用php之类的不是更容易吗？

buttons : { 
 position: 'bottom',
 tpl: '...<a class="test-btn" data-id="<?php echo $post->ID; ?>" href="#"></a>...'
}

问题是您不能$(this.element)在回调函数之外使用......您正试图在模板中使用它。

于 2012-07-08T10:19:28.877 回答