00:00
哈喽,各位小伙伴大家好,我是上硅谷前端讲师任平老师。这次给大家带来的是继HLCSSJS之后的上优选PC端项。上次课程当中啊,咱们已经完成了放大镜缩略图的动态渲染功能。本次课程咱们将继续来完成,点击这些缩略图之后,诶,换小图以及换大图的一个效果。好了,找到啊,咱们对应的一个GS,由于呢,它也是单独的一个功能,嗯。写上一行注释,叫做点击缩略图的效果。来吧。写上一个方。缩略图,诶,后面跟上一个。诶,缩略图的点击啊,来函数声明完了之后呢,一样咱们需要来进行调用。
01:02
函数声明好了之后啊,我呢就得来想一想,咱们如何来实现这样的一个效果。来,我把它刷新一下。点点点点点,好,那既然我现在他能点,首先你要做的第一步是不是要获取所有的Li元素,并且怎么着啊,诶循环发生点击事件,这肯定是你现在能够看到的,对吗?嗯,点。那点完了之后,你发现我点的是哪一个缩略图,上方的小图以及旁边的大图都随之变化了。也就是说我的小图路径来自于缩略图的路径,右侧大图的路径也来自对应的,诶缩略图的路径也说他们是统一的。
02:08
好。那点击完了之后,小图好说。嗯,小图好说,我只需要把缩略图的路径给到小图是不是就可以了。对吗?但是呢,你说大图不也是应该这样吗?你别忘了,你大图的初始路径是在哪儿建立的呀?来回忆一下子,咱们之前给大图在进行画它的一个结构的时候,是不是在搭建放大镜整体结构的那个函数里边呀?对吗?所以这就涉及到了什么跨函数之间的数据传递问题了。诶,跨函数的数据传递问题了啊,来咱们找一找,这是放大镜移入移出的效果,来走进去发现是不是在这里啊。
03:08
这是咱们一开始给的大图图片的默认图片路径。我现在要做的是,我点击无论哪一个缩略图,你的路径都要跟我是一致的。那你说老师我传参行不行,可以。更有好的方法,你想一想啊,咱们啊刚才做的这组数据是不是都来自于。我现在的这个IMAGE4S2C数组呢。那数组当中的元素是不是就一定要有下标啊,对吗?诶,这是第零个,这是第一第二第三,后面以此类推,我就不再写了。我现在假设我点击的是第二张缩略图。
04:01
那你第二张缩略图里边的小图路径在哪了?在S的键值里边存着了,那它的大图路径搁哪了?诶,在前面B件名里边存着了。那我的意思其实是在提醒你什么呀?我得知道你点击的到底是第几个缩略图。你只有确定了你点击的是第几张缩略图,我才能确定那这个下标当中它的大图路径,以及它对应的小图路径。是不是这个道理,同志们。哎,好了,切回来吧,咱们加上咱们的一个思路。写好第二步。点击缩略图,缩略图需要确定其下标位置。
05:01
来怎么着啊嗯,找到对应小图路径和大图路径替换什么现有S2C的值。诶,甭管是大图也好,小图也好,咱们都需要来替换它现在S2C里边的这个值。来吧。第一步咱们啊,需要获取所有的元素,嗯。Y Li know,等于document,点上ho,把咱们现在的这个页面啊给它跑起来。诶,给它跑起来啊,点击右键检查,找到所有的LY。放到咱们现在的这个参数里边。但别忘了啊,这是ch the letter o啊,The letter o好。
06:03
那么现在这些元素拿完了之后呢,咱们需要cancel dialog打印一下,看看你是不是真的拿到了啊。好,此时啊,这14个LY咱们是不是都拿到了对吗?嗯,拿完了之后好往下走啊第二步。要干啥了?循环点击这些Li标签啊,循环点击这些Li标签。或循环Y等于零,I小于no的长度,然后I加加。那么lino里边的每一个在发生点击效果的时候。好,我要做的是什么?确定其下标位置,你得先干这一件事儿,因为它很核心呢。
07:00
诶,咱们刚刚分析过了啊,你必须要把每一个你现在缩略图的下标确定了。这是第零章啊,这是第一章,这是第二章,这是第三,这是第四,后面还有很多怎么隐藏看不到的。你得需要先把它的下标确定了,诶,它对应的那个S的电值和它对应的那个B的那个电值,我是不是就应该都能看得到。对吗?嗯,好。那我怎么确定我点击的是哪一个呢?你说老师啊,这里边I不正好是咱们的那个下标吗。来吧,我给你看瘦点儿那个。来给他打印一下,按道理来说我点应该是01234,以此类推对吗?点吧。发现了什么事情,说老师怎么都是14呢?哎,你别忘了啊,负循环咱们说过,它是一个同步执行代码。
08:06
而你的事件的回调函数,它是一个异步执行代码,同步和异步之间到底谁先执行啊,是不是同步啊,在你整个页面一加载完,我整个的GS是不是就有可能都已经执行完了,For循环都走完了。对吗?AI为零,然后一圈一圈的再增加,当它增加到14的时候,由于14小于14不满足,所以当我再来发生点击事件,执行这个回调函数的时候,I就已经等于14了。那我要的是14吗?并不是啊。所以这个I变量是不是就不能这么来用啊?你说哎,不能用,那怎么办呢。
09:00
想一想,咱还有没有其他的方法?哎,有同学一定想到了啊,咱们是不是还有自定义下标的办法?在点击事件之前,给每一个元素都添加上什么自定义的下标,既然你的I变量不不能用,其实在哪不能用,是在咱们的回调函数里边不能用。抛开咱们的回调函数,你正经的去在一个负循环里边去要这个I,它肯定能写呀。来,我在这儿给大家去打印一下,你现在的这个,哎,我不发生点击事件,每一个是不是都能正常打印。我一放到点击事件就不行了。哎,所以,但是呢,我就在想,我借助一个中间的桥梁,把每一圈循环的I放到谁身上,元素对象身上。
10:04
记录给他一个自定义的属性,当然像这种记录数字的,咱们一般都可以叫做自定义,下标自定义属性,其实都是一回事。都是往什么不存在一些固定属性的元素身上,往里边去添加一些东西。来吧。写的时候啊,咱们可以给每一个元素直接通过点或者是中括号的方式来进行写入。比如说习惯叫什么,Index就为下标。当然在这里呢,我也给大家去拓展一下,还可以通过什么呀,Set。Attribute的方式。啊,你说老师为啥你用这个不用这个set tribute呢?当然你用两个哪个都可以,只不过set tribute的话,它是可以将你自定义的一个属性写到元素对象身上。
11:09
而点inex的这种方式,它是没有办法写入到元素对象身上的,哎,就这么点区别啊,就这么点区别好,那么我现在给元素身上加进去了,那加完了之后我是不是得要去获取一下呀?AIDX等于什么this点什么index。啊,this.index好了。关于啊这个index啊,关于这个this.index我也得要跟大家多说一句。事件函数当中的Z是不是永远指向其实际所发生事件的元素对象?事件函数当中的Z,它永远指向的是实际发生事件的目标原对象,好,你点的是哪,那这就指向的是哪。
12:13
我点击的是LY,好,那我这次就指向的是LY,来吧,我现在把它身上的这个index的属性记录上面了之后我来获取一下。走走走走走好,下标OK了吗?下标已经OK了。啊,下标已经OK了,好,下标OK了之后,我就得想,我是不是得让他点完了之后换小图和换大图啊。对吗?哎,咱们先搞定一下大图。大图初始路径在哪儿放着了?是在上一个函数里边搁这儿放着了,对不对?我现在的下标已经确定了。来,咱把刚才的这个数组打开。
13:02
我现在的这个下标已经确定了,假如说这是012,这是三下标对吗?下标有了,我就可以找到它里边大图的路径和它对应的小图路径往回传。目的是什么?是目的就是需要我在这儿别写死了,写成什么,写成你现在所点击的这个下标里边的大图路径。好,由于啊,咱们现在是在两个函数当中来进行操作的。传递数据可以靠参数,也可以靠变量,把咱们的作用欲给它提升到最外侧来,好在咱们全局的作用欲当中声明一个。记录。缩略图下标或者叫做记录点击的。
14:01
缩略图下标。诶,在这记录一下more big image index默认等于啥呀?零,诶,默认等于零,那么让我现在写的这个下标等于是不是就是我现在的这个IDX。对吧,哎,它等于IDX好了,那现在ADX解决了之后,往回传吧,找到咱们之前移入移出时候的这一条。它等于什么?等于现在这个images数组里边的那个下标当中的B。好了,那我就不得不在这个函数当中再做一件事情,什么获取一下数据。Y images s2C等于good date.images s2C好了,把这个变量拿过来放到这儿。
15:06
它是一个数组对吗?数组哪一个下标是不是咱们刚才所点击的那个下标的B,是不是就把这个值给回传回来了。对吗?好,那么现在他回传回来了之后,咱们现在还剩什么小图的路径。啊,还剩小图的路径好。小图路径呢,也是在咱们点击缩略图之后产生的,来找到咱们刚才的点击事件。变化小图路径小图呢是咱们small pic。啊,不是small pic啊,这个应该是。看一下啊。
16:00
这个应该是在咱们small pic下面的一个音妹纸,来,咱们先在前面获取一下。Small。Pic的,因为纸等于搁这儿拿一下啊。Document,点上selector,然后空格加上image,好。我把这个图片点S2C等于什么?等于我现在这个数组。哎,咱们还得要去拿一下。数据啊,Images等于good date点上images。我要拿对应我所点击的那个下标,诶IDX就可以了,点上什么sa小图路径啊小图路径好来咱们看一下吧,小图跟大图此时是不是就已经统一了。
17:08
哎,已经统一了啊好。但是啊,在这啊,我需要再给大家提示一下啊,提示一下还有一丢丢的可能性。假设假设我呢,把咱们数据当中前两行啊,我先给你注掉。人说老师你注掉它干啥呀,测试嘛,对不对,哎,把两天晚上给你注掉,注掉了之后来你观察一下,现在我没有发生任何点击的时候,第一张缩略图的路径和我小图的路径是不是就不太一致了呀?诶大图倒是可以,所以怎么着诶那么在咱们现在的这个小图。路径需要默认和什么IMAGES2C的第一个元素小图的路径是一致的。
18:04
A是一致的啊,让它点S2C等于什么?哎,不是这个啊,是当前图片的S2C等于数组当中第零个的小图。这样的话才能确保万无一失。哎,才能确保万无一失啊好,我把这两个还原回来,嗯,此时在这个位置里边呢,咱们就实现了点击缩略图换小图和大图的功能,稍微有一点点绕的,就是在哪呢,在咱们的一个下标的传递上面。下边传递咱们之前说过了,你可以采用函数之间传递参数的问题,也可以由于作用域的限制,把局部的变量提升到咱们的全局变量。啊,提升到咱们的全局变量,哪需要数据哪我就得要获取一下,因为咱们的数据变量都是局部变量。
19:06
OK,本次课程呢,咱们就已经实现了点击缩略图来换小图和大图的效果。
我来说两句