Question

我有一个打开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。我如何才能实现这一目标。

Answer 1

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

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

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

Answer 2

在绑定回调时正在评估

$(this.element).data('id')。 this将是您拨打$.fancybox时所处的任何情境。

如果您将Fancybox绑定到锚标记，则您已经选择了该锚标记。这样的事情应该有效：

$('a.fancybox').each(funcion () {
  var $a = $(this);
  $a.fancybox({ tpl: "..." + $a.data('id') + "..." });
});

Answer 3

使用php会不会更容易吗？

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

问题是您无法在回调功能中使用$(this.element) ...您试图在模板中使用它。

在Fancybox选项中访问“this”

3 个答案: