00:00
在上次课程当中呢,咱们已经啊实现了点击第一行选择颜色上所有DD它的文字颜色排他效果。那本次课程呢,咱们将继续来完成后续其他行里边对应DD文字颜色的排他效果。好了,咱们找到之前写好的这个函数。JS下index JS,嗯,每次写完啊,打开这个文件都得要把它折起来啊。要不然咱们突出的写的真的是太多了。好,那么现在咱们之前的这个思路还是可以被保留下来的,DL元素获取的是所有,然后我现在是不是只需要把这个位置,它的下标变成0123。A,循环整体这一段代码是不是就可以了呢?嗯,好。
01:02
在这啊。嗯,取第一个DL元素,咱们先做测试,诶再加一句测试。完毕之后。在对应第L第一行下标的前面再嵌套是这个啊,再嵌套一个for循环。目的在变换下标。目的是在变换下标,诶折一下行啊,因为它太长了,好在这个位置啊,咱们去给它加上一层缝,因为前面呢,咱们已经用到了I和勾,我呀把这个变量咱们稍微调整一下啊,因为习惯性的呢,是先写I,然后再写勾,再去写K这样的一个变量顺序,嗯。哎,加加好,我把剩下的这段代码,咱们整体都给它放进来。
02:04
格式化一下啊。嗯,然后这个位置呢,咱们把它这个零啊变成I啊,然后里边的负循环第一层呢,给它变成勾。这个位置呢,也给它调成勾里边的,自然而然咱们给它调成K。嗯,好了,按照道理来说啊,现在咱们的这个外层已经加了一个负循环了,那每一个DL当中是不是都会去找它对应的DD,然后把这些DD给它拿出来遍历一下,加了点击事件剩下的的那个没有点击的DD呢,让他的文字颜色变成666,而点击的那个单纯设置为红色,怎么看是不是都没有问题?趋近于完美,但是我跟大家说啊,你越欣赏这个代码,那么你越得从中找一找,有没有一些小细节是容易被你漏掉的。来,咱们来测试一下。
03:07
打开当前的这个页面,我们重新运行一份。点点诶。发现了个问题,当前我之前不是写好了吗?怎么现在又不行了呢?别着急,诶接着往下点。啊,你说老师接着点,我这心也稀碎稀碎的呀,来,再碎一点。诶,最后坚持一下发现什么了,哇塞,稀碎稀碎的,还没有碎的这么彻底,诶,最后一行是好使的,那么你想一想原因是什么呀?说要不行都不行,要行就都行,为什么就这么歧视我们前三行的同志啊,怎么就最后一行可以了呢?你想一想啊,这是零下,这是一下标,这是二下标,这是三下标对吗?在它循环外层的这个for的同时。
04:08
好,那我问你了啊。那么里边的负循环是不是也在进行执行?那你说老师没问题呀,咱们现在只要不点,是不是就应该有两层负循环的嵌套?外面一层负。是AVR,然后I等于零,诶然后呢,小于四,因为它是三行吧,对吧,一共呃四行啊四行它的下标为三啊I小于四,然后呢,I加加。好,这是咱们最外层的对吧,然后里层呢,还有一个for循环,嗯,For循环,然后VR勾,然后等于什么零,然后勾小于你第零行的是三个,咱们先假设为三,嗯,勾加加,这是咱们之前在学习的时候双层负循环的嵌套,没问题,同志们你要相信你自己写到这两层负循环是没毛病的。
05:13
那你说老师,那为什么会形成这样的一个现象呢?这问题咋又绕回来了呀?问题出在哪里啊?事件函数啊。你别忘了有多少层负循环,咱们是不是都是同步执行代码,第一层循环在转的同时是不是也在转它的内层循环,它俩是不是在同时工作,对吗?然后你突然给了我一个,我就先用叉叉来表示了啊,它点上on click。然后等于什么等于function?A等于function啊。括号括号好,之前跟大家强调过这个function,它是不是一个回调,类似于像回调。
06:05
对吧,诶回调的咱们的这个意义是什么?第一你不去调用,第二呢,你需要去借助一些时间来进行完成,要么是时间来驱动这个函数,要么是通过事件来进行驱动这个函数,而恰好咱们中的是第二种通过事件来进行驱动,好那我问你了啊。当我这个页面函数在调用的同时,他们两个是在同一时间,用很快的一个速度,嗖的一下,是不是就已经完成了。当你再点,我问你此时的勾,我能拿到012吗?拿不到,为什么?因为如果能拿得到,为什么我刚才一定要费劲巴拉的去写那个this呢?对吗?好,那我问你了啊,一层for循环,它里边根变量我都没有办法拿到012,那我问你,我外面再加一层for循环,我想要用那个I,我能拿到0123吗。
07:06
到底是不是同理啊,同志们。啊,老师,那我现在稍稍明白一点了,也就是什么负循环又执行完了呗,哎,当你点完点完了这个函数是不是又只拿到结果了,没毛病啊。对吧,那你想函数是不是只有直行到四的时候怎么着了跳出了,而你内层循环第一行是不是直行三跳出了。对吧,然后第二行直行到四跳出了,第三行直行到二跳出了,最后一行直行到三跳出了,都不满足为条件,而最后外层的这个负循环直行到四,由于四怎么着,四小于四还满足条件吗?不满足了。是不是就要跳出循环了?对吧,好,那你说老师原理我已经懂了啊,那我怎么解决呢?问题就出在咱们的变量身上。
08:08
诶,就出在咱们的变量身上,我呀先把这个点击事件怎么着呢,先给你整体注掉,咱们就单看这两层for循环来,我在内圈给你cancel.log打印一下勾。按道理来说,两层负循环,外层管什么管?大圈循环多少轮?那一圈for循环,管你的内容执行多少遍。那你看吧,现在我打印勾外圈要直行多少轮,要直行四轮。那你说我要再想看一看,它到底是不是四轮呢?在你每一次执行完那一圈循环之后,你可以怎么着啊,打一点分割线吗?
09:00
对不对,诶打点分割线啊,我们去看一下。来检查看一看,咱们现在是不是当前第一行?诶,我用红色来表示啊,第一行里边是不是有三个,它的下标为012,人家给你的是不是也为012,第一行对吗?来换橙色,第二行是不是为四个,下边是什么0123。诶,人家给你的是不是也是0123。第三行,诶,我用粉色,当然现在这个答案已经很明朗了啊同志们,我现在诶标注这是零,这是一,他给你的是不是也是零和一。对吗?是不是都对上了呀。对吧,诶这都对上了啊,这也都对上了,那对上了,也就是说单纯两层负循环是没毛病的。我只要一张的事件。
10:02
里边对应的勾,还有咱们外面的这个I是不是对于它的过程是不是都拿不到了。诶,咱们现在还处于一个分析的状态,我慢慢引导大家,诶那你得慢慢去想啊,这个咱们到底应该怎么去解决,解决其实好解决一句话的事儿。但是你得知道他到底为什么是这样的。啊,它剖析它的一个原理。那么我现在知道了,这个勾变量和I变量,默认只要不沾事件,它都是没有问题的,只要粘了事件这个函数,它就一定得在什么你点击的那一瞬间之后,这个函数是不是才会执行。那都已经晚八期了呀。啊,那都晚了,都都已经很晚很晚了,那你想吧,函数外圈I都已经转到四了,内圈该转到头的也都转到头了,那你再去点那黄花菜都凉了。
11:05
对吗?所以怎么办,我是不是得想着把你每一圈的这个I是不是得想办法存起来。哎,你说老师咱们用过变量吗。那用变量是不是还会有重复替换的可能性啊?嗯,那没有变量,那我还能用什么呢?那你来想一想,咱们之前说啊,你定完的这个变量。他是不是得有所存储的一个位置。对吗?A、所存储的位置。内存当中啊,是不是分两块,一个是咱们的占。还有一个是咱们的对。那就得想吧。占低,它的空间小,存储的速度快。
12:00
对吗?且存一些基本数据类型。而咱们的堆啊,它一般存的是堆象对吧,存储的空间较大,而且它的大小也是不明确的。站呢,它用完了自动就被释放掉了。诶自动就被释放掉了,耳不会。你如果想要进行释放,你得怎么着手动来释放?那老师你是不是就想着让我把数据放堆里边啊,诶有点这意思了。啊,有点这意思了,那你想我现在问一个变量,它后面是不是为零,零为什么数据为基本数据类型数据啊,我转完一圈,好,那你那个零的数据还有吗?没了,再转一圈,是不是用I来把零怎么着给覆盖了?对吧,诶覆盖掉了,覆盖掉了诶。碰了一下键盘啊,那么在这里。
13:02
一圈为零,好,我怎么着了,加一,然后让它过渡到一,那我问你此时那个零是不是就被覆盖掉了,我现在要做的就是怎么着啊。想办法把零留下,想办法把一留下,想办法把后面所有的值都给他留下。你只要把这些值一个一个都留下了,那我的I在我的事件函数当中才不算什么失效呀。诶才不算失效,好,那你说老师你前期铺垫了那么多。那到最后咱们怎么解决呀?我都已经跃跃欲试了,等着你写那行代码了。好,那么大家想一想啊。刚才咱们已经提到了堆。对吗?诶提到了堆啊,那堆当中的数据是不会被轻易的来销毁。
14:05
那什么东西能放到堆里边,而且还能方便咱们啊,在函数里能够取到外面的一个数据。请啊,仔细听我这句话很重要啊,你能不能听出答案,就当前这一句话。在函数的内部想要使用外边的一些变量,哎,说老师我想到了。什么是不是作用于练啊?对吧,诶,你首先应该能想到的是函数的作用域链。你说函数作用于链,老师,咱们这跟堆又扯到什么关系了呢?你别忘了呀,函数的作用域链有一个特别明显的应用,叫什么比包函数啊。
15:00
诶,B包函数是不是内部的那个必包函数,它就放到了是咱们的一个堆里边呢,那堆当中的那个数据会手动清除吗。不会呀。哎,你说老师我也知道了,诶B包啊,函数内部的这个变量啊,我想引用到函数外边。啊,这个某一个值,那我应该往哪加呢。你想着是每一行DL。我是不是都得要确定它的下标,那你想想咱们应该在哪加呀。诶,老师我知道了,咱们应该在第321行来加。好,在这写上这个必包函数呢,咱们来上一个立即执行的写法。这是不是咱们写到的一个匿名函数啊。对吗?把你想要执行的这个功能整体给它包进去。
16:03
这个呢也是不太容易想到的,或者想到了之后容易出问题的一个地方,我呀这个立即执行函数。它是为咱们的行参。而调用的这个位置是咱们的食参、实参为谁?为全局的I变量,而它的行参你可以自定义在这里,我为了保证和后续所有的这些变量同名,我也叫I,但是此I非彼I。啊,因为咱们说了这个变量,它查找的机制是不是一定是向上来进行查找,且遵循就近原则,好,那这个I。还是外侧的这个I吗。啊,当然它里面的值是来自于它,但是你别忘了这个函数它里边想要用这个结果是不是要来自于外侧的。
17:02
每一行当中的DL里边的DD是不是都被咱们保存到了这个变量里边?来打印一下吧,can.log里边打印一下这个DD的nose。其实每一行DD我是不是都拿到了,对吗?好,那每一行DD都拿到了,我给每一行我现在所点击的这个DD,它的颜色设置为红色,而其他的DD文字设置为666,是不是就没有问题了呀?来吧,咱们来测试一下。点击点击诶貌似是好使了,是不是原因就在于什么,咱们外侧的循环DL这个行的问题。因为你外侧这个行的I,它在一直被覆盖,一直被覆盖,所以只剩了什么,只剩了最后一行了。啊,只剩了最后一行了。
18:03
所以咱们只需要去加一个闭包函数,就可以解决当前循环变量的一个问题。OK,那么本次课程呢?咱们就将利用必包函数解决掉循环事件当中变量的问题,从而实现了文字颜色排它的一个效果。
我来说两句