javascript - Fancybox Observer 跨多个链接？

Question

如果我有这个标记:

<a href="#" data-fancybox-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a href="#" data-fancybox-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a href="#" data-fancybox-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a href="#" data-fancybox-content="<p>Content 4</p>"> Click Here for Content 4</a>

我想为每个链接设置我的 fancybox 观察者，但我希望将弹出窗口的 content 设置为每个链接的 data-fancybox-content，有没有办法做到这一点一举落下？

Answer 1

您不需要 .each() 方法，而是使用常规 fancybox 初始化脚本将选择器(或元素)绑定(bind)到 fancybox，因此

<a class="fancybox" href="#" data-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a class="fancybox" href="#" data-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a class="fancybox" href="#" data-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a class="fancybox" href="#" data-content="<p>Content 4</p>"> Click Here for Content 4</a>

注意将 javascript 事件绑定(bind)到全局元素(HTML 标签)而是使用特异性(CSS 选择器)并不是一个好主意，因此我们添加了 >class fancybox 到我们想要绑定(bind)到 fancybox 的元素。

另请注意，我们只使用了 data-content 而不是 data-fancybox-content 属性(data-fancybox-{something} 是一个对 content 没有值的特殊属性)

然后您可以使用 beforeLoad 回调动态设置content，如下所示:

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        beforeLoad: function () {
            this.content = $(this.element).data("content");
        }
    });
}); // ready

参见JSFIDDLE

PS。您甚至可以通过为元素设置 rel 或 data-fancybox-group 属性来设置 fancybox 库。您无法使用 .each() 方法来做到这一点。