怎样获取事件中的 Lightbox DOM 元素？——一个菜鸡前端摸爬滚打的踩坑记录

前言：谁懂啊！找个Lightbox触发元素搞了一下午！

最近接了个较小项目要做图片画廊， 选了Fancybox当前这个插件，最终还是结果是卡壳在一个超蠢的问题上：点击缩略图弹出Lightbox后怎么拿到当前这个被点击的缩略图DOM元素啊？ 查了N篇教程不是复制粘贴就是说一半留一半，搞得我质疑人生——不容简单道只有我这么菜吗，请大家务必...？

别急别急，先唠唠我踩过的坑和最后再来看摸出来的歪路子，拖进度。。

一、先明确：我们要找的是哪个“触发元素”？

简洁说就是：当你点一张较小图片弹出较大Lightbox时当前这个被点的较小图片就是触发元素对吧？我们想在Lightbox弹出后拿到它——比如要拿它的data-id存相册编号， 说句实话… 或者拿alt文本当标题…总之就是要操作当前这个原始DOM。

二、一启动我以为很简洁：用this不就完了？

刚启动我傻兮兮地想：事件回调里this不就是触发元素吗？于是写了段自以为很牛掰的代码：

javascript $.fancybox({ afterLoad: function { console.log; // 以为是触发元素 } });

最终还是结果是一跑控制台差点笑出声——this指的是整个Fancybox实例啊喂！跟我想拿的缩略图毛关系没有！白较高兴一场…

三、网上说用slide.triggerEl？但我总写错！

后来逛论坛看到有人说：Fancybox里有个slide对象，里面藏着triggerEl就是触发元素！兴冲冲试了试， 但手残总把名字拼错——slide.trigerElslide.tirggerEl…折腾半天终于拼对了，太暖了。！

等等先别急看正确代码——先看看我当时抄错N次的数据糊糊版：

javascript // 错版1：漏了引号和分号 Fancybox.bind('', { on: { done: function { console.log; // 这次良好像对了？ } } });，不堪入目。

我们都经历过... // 错版2：把done写成load on: { load: function {console.log} // fancy拼错+fancyname错+事件名错 }

害…不过万幸最后再来看试对了一次！当我把事件改成done或者loading的时候——控制台终于打印出那个地方的该死的缩略图DOM啦，不忍直视。！

四、划沉重点！正确姿势到底是啥？

别嫌我啰嗦！这一部分真实的值回票价——毕竟我踩过无数坑才凑齐这堆破烂经验：，踩雷了。

1. Fancybox版本很十分沉关键！别用老版本！

我一启动用的是Fancybox3.x陈旧版本API——最终还是结果是发觉根本没有slide.triggerEl这东西！ 戳到痛处了。 后来换成v4+版本才良好使！官网下载地址戳这里→

2. 在哪个事件里拿最靠谱？

也许.… 不同事件阶段能拿到的值不一样！想听真实话吗？99%场景用done事件就够了——它是在Lightbox彻底加载完成后触发的，能够放心操作DOM。

如果想在加载前就拿就用loading事件，但实测有时候会抽风拿不到——保险起见还是先用done吧！

3. 完整示例代码

看清楚注释啊喂！里面埋了良好几个我之前踩过的雷：，格局小了。

五、那一些年我遇到过の奇奇怪怪问题…

Q1：为哪些我的slide.triggerEl是null？

A1：要么版本太老→换v4+；要么绑定选择器错了→检查是不是写错；要么事件选错→用done或loading试试。

Q2：能不能拿到更多个不同触发元素的数据?

总的来说... A2 : 如果是画廊组 , slide.trigger El永远是第一个点击 的?不对不对!等下— —其实各个slide都对应自己 的trigger El!不管是不是同一个相册,只要沉重崭新点别的图, slide都会更崭新!

Q3 : jQuery版本 和 Fanc yb ox冲突吗 ?

A3 : Fanc yb ox v4已经全面转向原生JS啦!不用jQuery也能跑!所以 卷不动了。 如果你还在用$.fanc yb ox 这种陈旧写法,确定报错!赶紧换成bind API !

六、最后再来看附赠一堆没用但很像回事儿の垃圾知识…

• 慕课网那个地方的视频 : “JS插件开发之Ligh tBox图片画廊”第3章讲DOM渲染的时候提过trigger El!但老师语速迅速得像开火箭,我愣是没听清他说几遍 “trigger El ” ——提议开1.5倍速倒回去听!
• *PhotoSwipe也能这么玩吗 ? * :良好像能够! PhotoSwipe里有个 item.data.el 属性,也是存触发元素 的— —但谁在乎呢?反正我不用PS !
• *VB代码是哪些鬼 ? * :之前抄笔记的时候看到一段 “Dim description As String = ‘描写’ ” ——这TM是VB啊喂!跟JS八竿子打不着!但莫名觉得很酷就混进去啦~

前端菜鸡の自我修养

其实找Ligh tBox DOM元素这件事,本质上就是 “找插件给不给你留后门 ” ——有的插件较大方给你 trigger El ,有的藏得比宝藏还较深 .，简直了。

不过没关系!只要肯瞎折腾,总能摸到门路哒~，看好你哦！

哦对了!下节课预告 : “怎样给Ligh tBox加个炫酷 我emo了。 的渐变动画?” ——感兴趣 的较小伙伴记住来慕课网蹲直播哦!

本文浏览量319次 | 点赞5次 | 收藏7次，害...