Question

已经搜索过这方面的解决方案但是我的空白。我正在尝试设置数据属性并在fancyBox选项中访问它。

我的锚链接如下所示：

<a class="expand" rel="gallery" href="/assets/images/larger-image.png" data-source="Some string" data-id="Some number">
    <img src="blah.jpg" />
</a>

我的JS：

$(".expand").fancybox({
    'padding' : 0,
    'tpl' : {
        image : '<img class="fancybox-image" src="{href}" alt="" />'
    }
});

我希望能够访问tpl选项中的那些数据属性。

$(".expand").fancybox({
    'padding' : 0,
    'tpl' : {
        image : '<h2>' + $(this.element).data('source') + '</h2><img class="fancybox-image" src="{href}" alt="" /><h3>' + $(this.element).data('id') + '</h3>'
    }
});

我无法在该背景下访问this.element;是否有一种优雅的方式来实现这一目标？

Answer 1

嗯，tpl用于格式化fancybox结构的特定元素，所以这个

'tpl' : {
        image : '<h2>' + $(this.element).data('source') + '</h2><img class="fancybox-image" src="{href}" alt="" /><h3>' + $(this.element).data('id') + '</h3>'
    }

它有点奇怪，因为你添加了不属于image模板的元素（通常你会用它来添加类或其他属性< / em>等。）

无论如何，如果这是你想要的，你首先需要使用fancybox回调来访问data属性（$(this.element)只能在回调中访问）。

然后，您可能需要使用jQuery.extend()方法动态修改fancybox 模板（从afterLoad回调中），如：

$(".expand").fancybox({ afterLoad: function () { $.extend(this, { tpl: { image: '<h2>' + $(this.element).data('source') + '</h2><img class="fancybox-image" src="{href}" alt="" /><h3>' + $(this.element).data('id') + '</h3>' } }); } });

参见 JSFIDDLE

在fancyBox选项中使用数据属性

1 个答案: