本文介绍了如何在 Fancybox 的事件处理函数中获取触发 Lightbox 的 DOM 元素，例如在 `initLayout` 或 `done` 事件中使用 `slide.triggerEl` 属性来访问该元素，并展示了如何利用该元素获取自定义数据属性。
在使用 Fancybox 构建画廊时，有时需要在特定的事件（例如 initLayout、loading 或 done）中访问触发 Lightbox 的原始 DOM 元素。这允许你根据触发元素的属性（例如 data-fancybox）执行自定义操作。
Fancybox 实例本身（this）并不直接提供对触发元素的引用。但是，在事件处理函数中，你可以通过第二个参数 slide 来访问该元素。slide 对象包含了有关当前幻灯片的各种信息，包括触发它的 DOM 元素。
以下代码演示了如何在 done 事件中获取触发元素的 DOM 元素及其 data-fancybox 属性：
Fancybox.bind('[data-fancybox^="gallery-"]', { on: { done: function (fancybox, slide) { // slide.triggerEl 是触发 Lightbox 的 DOM 元素 // slide.triggerEl.dataset.fancybox 是元素的 data-fancybox 属性值 console.log(slide.triggerEl, slide.triggerEl.dataset.fancybox); }, },});
在上述代码中，slide.triggerEl 包含了触发 Lightbox 的 DOM 元素的引用。通过 slide.triggerEl.dataset.fancybox，你可以访问该元素的 data-fancybox 属性，从而确定触发 Lightbox 的画廊。
如果你需要在更早的阶段访问触发元素，例如在 Lightbox 加载之前，可以将 done 事件替换为 loading 事件：
Fancybox.bind('[data-fancybox^="gallery-"]', { on: { loading: function (fancybox, slide) { // slide.triggerEl 是触发 Lightbox 的 DOM 元素 console.log(slide.triggerEl); }, },});
注意事项：
slide.triggerEl 属性只有在相应的事件触发时才可用。确保你的选择器（例如 [data-fancybox^=”gallery-“]）正确匹配你想要绑定的 DOM 元素。
总结：
通过利用 slide.triggerEl 属性，你可以在 Fancybox 的事件处理函数中轻松访问触发 Lightbox 的 DOM 元素，并根据需要执行自定义操作。这为构建更灵活和可定制的画廊提供了强大的功能。
以上就是Fancybox: 在事件中获取 Lightbox 的 DOM 元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529109.html
微信扫一扫 
支付宝扫一扫 
