00:00
在上次课程当中啊,我们已经实现了商品参数的动态渲染功能。那么本次课程呢?咱们将继续来完成点击每一行商品参数之后的文字排他效果。好了,咱们来看一下。当我以选择颜色这一行为例,我选择银色好,银色文字变成红色的,黑色好,它变红,其余未点击的都是什么?诶井号666,它之前基本的一个颜色。如果想要实现当前的这个效果,首先咱们是不是得要先来上一个函数是吧?嗯,来怎么找到对应JS这个文件,把之前咱们实现的这些功能都给它合起来。都把它合起来啊,在这底下咱们再加一行注释,叫做点击商品参数之后的颜色排它效果,嗯。
01:12
Function click,因为原来啊,咱们是用DD来进行布局的,所以我就直接DD版的,嗯,函数定义好了之后啊,咱们需要来调用一下。写好了函数,咱们就得想一想,这个位置咱们应该如何来实现。观察一下啊,我点击第一行的时候,点谁谁是红色,第二行也是一样,第三第四都是这样的,所以也就是说我只需要将第一行。DL它里边的文字点击的颜色排它搞定了,那么剩下的这三行,其余的这个文字颜色是不是都是相通的道理?
02:07
对吧,诶,因为每一行是不是都是DL第一行。第二行,还有第三行,第四行,每一个都是DL。我可以将咱们所有的DL统一给它全部获取出来,那么全部获取的时候,咱们可以以corris left oh,或者是get elements by name这两个方法其中的一个来进行获取。获取了之后呢,它返回来的是一个类似于集合的一个结果,只要是集合前面一定有下标。诶,一定有下标。那么也就是说啊,我只要搞定的第零行DL里边的这些DD,它的文字排它,那么剩下的我就需要让他把下标依次干什么加一。
03:07
也就是说,外面再套一层什么就可以了,否循环呗。对吗?诶,因为只有负循环,是不是才可以让咱们的这个外侧变量的下标进行逐步加一。好了,想通了这个道理啊,咱们就把咱们的思路来记录一下。在这个位置啊写好。第一步。获取所有的DL元素。取其中。第一个DL元素下的所有DD,诶,咱们可以先做。测试,诶先做测试。对吧?诶,你先把第一行当中DL里边所有的DD你先拿出来,先做测试,它跑通了,无外乎后面三行,咱们就外面套一个或循环重复刚才的这个行为就可以了,嗯,那么所有的DD元素取出来了之后,那么你得想一想下一个步骤干什么?
04:19
我拿完这些,弟弟。我是不是得挨个进行点击呀,对吗?诶点它点它点它。所以怎么着?循环所有的DD元素。并且添加点击事件,诶,并且添加点击事件,嗯。点完了之后,我得想吧,这三个元素,我是不是得要确定我到底点的是银色,还是点的是金色,还是点的是啊,还黑,是咱们的黑色还是咱们的金色。对吧,我得确定啊,这三个里边我到底点的是哪一个,对不对,诶来写上,确定实际发生事件的目标原对象。
05:11
诶,你得先确定这个事儿,然后。给其他所有的元素颜色都重置。虫质为基础颜色。诶,当然这个基础颜色就是咱们之前说到的这个井号666,如果没有记错的话。嗯,井号666啊,是它的一个基础颜色。好确定它的目标原对象,然后干什么?诶,设置其颜色啊,文字颜色为红色啊,文字颜色为红色好了。咱们按照咱们的思路一点点来进行实现啊,第一步找。
06:02
第一个DL下的所有的。DD元素,嗯,DD not等于document点上。哦嗯,因为这个位置啊,因为我要需要去获取所有DL啊,这是咱们写上DL吧,嗯,DL啊。来,我把这个页面怎么给它跑起来。点击右键检查,然后找到所有的DL打出来。写好了之后啊,咱们需要来cancel点儿log打印一下,看一看你这个元素是不是真的拿到了。好了,那么它给咱们的是一个no the list对吗?节点列表,节点列表它的使用方式,基本的向下标获取元素以及咱们的便利啊,都跟HTML collection这种元素对象集合基本是没有太大的差别的,嗯。
07:13
好,那么现在我只需要先取出来什么,取出它,它里边的第一个,嗯。来玩一个。在这吧,嗯。咱们定一个变量,嗯,DD no等于咱们dl no集合的第零个点,然后call letter o。找什么呢?找它里边的DD,诶这个DD的话,咱们就直接写就可以了啊,来把现在这个变量啊,咱们给它塞进去看一下现在这三个DD是不是你所需要的元素,往下拉一下。来,我鼠标放到这儿,此时你观察到了鼠标聚集的元素,第一个位置是不是我刚才所诶不是这个啊。
08:07
是不是刚才我选择的这个元素。对吧,嗯,元素定位到了之后好。第一步。记完了第二步,便利当前所有的DD元素,嗯,来一波后循环。YI等于零,然后I小于DD nose的长度I加加。然后让DD nose里边每一个元素点上on click等于function,嗯,等于function,然后在这里边啊添加完点击事件第三步,首先咱们是不是得要先确定一下目标原对象。这个位置咱们之前已经提到过了,诶在这呢,不能写成啥呀,同志们不能写成滴滴nose中括号I,再说一遍,千万不要写成它,为什么?因为for循环咱们说过,它是一个同步执行代码。
09:14
当你整体JS文件加载了之后,函数一旦被调用,这个for循环就立即执行了,他没有任何的一个时机。比如说像是在事件里边,或者说在一些时间函数里边,根本都没有,只要函数调用,它是不是就会立即来进行执行。那它执行完了之后,由于你现在的这个DD元素,那你得想吧,此时它这是不是有三个对吗?下标从零开始,012,好,我让它循环,然后最后一圈直行到A加加的时候,那现在这个A等于多少了,等于三,那三小于它的总数三,那它是不是就是不成立了呀?那条件不成立怎么办诶。
10:09
跳出当前负循环嘛。是不是那负循环一旦跳出了,那我问你此时的I是不是就等于三了?Cancel log咱们来打印一下,哎,我把底下这一行啊,先给你注,诶先给你注掉啊点点点是不是每点击一个是不是都是为三。原因咱们刚才说过了。那I都不对,那我能直接写成弟弟nose中括号I吗?不能吧,因为没有这个下标对吗?那我找不到集合里边对应的那个下标值,返回来的就一定是啥呀,安迪find呀。对吗?点点点是不是安迪范的V01呀,他找不到这个值。
11:00
啊,找不到这个纸,好,那这个不能写,那咱们就得想是不是有一个关键字很重要的this。啊,这个this,咱们说了这个this,它的意思是什么。诶,这个this啊,写上这个this呢,表示。哪一个元素真实的发生了事件,诶,哪怕它这个是一个嵌套类的结构,没有关系,我点DD它代表的就是DD,我点DL它代表的就是DL,但只不过咱们在这种事件函数对象当中里边的这个this,它和你现在绑定的这个事件元素它是有直接关系的。啊,它是有直接关系的啊,如果你点击的是DL的话,那么我这个Z你点DL,我代表的是DL,你点击DD,我代表的是DD。
12:03
OK吗?同志们,嗯,好,来咱们再看一下啊,我点它点它点它这三个元素我是不是拿到了对吗?拿到了元素没完呀,我还得怎么着,是不是还得设置其文字颜色为红色对吗?嗯,来这点still点上color等于right。诶,让它等于个red,来咱们点一点吧,点点是不是我每点击的这个文字,它的颜色为红色,剩余的一些颜色咱们需要给它重置为基础颜色,重置一定得完成在你点击之前,否则它就会被替换了。来,我再来上一波啊,Y勾等于零勾小于,还是这些DD的元素。勾加加,让DD里边的每一个,它的颜色等于井号666,嗯,咱们先来试一下啊,先来试一下来刷新。
13:09
点点颜色第一行排它的效果是不是就已经出现了?那你说老师这个排它,它具体是咋实现的呀。对吧,它具体是咋实现的呀?诶我来给你重复一下子啊,你想当前前面的这个负循环这个勾,它是不是从零开始对吗?嗯,我呀,把后面这行也给你跟进来。它里边一共是有三个弟弟,这是一个。这是第二个,好,这是第三个,嗯,这是咱们对应这个for循环里边执行的事情,而最后一个位置的this,它是不是也代表了弟弟nose中括号I。对吧,诶好,那我问你了啊,既然它代表了这个元素,那如果我现在点击的是银色,那银色的下标是几啊。
14:08
是不是唯一对吗?诶,写上。假设点击的是D。二个元素,当然我这个第二个元素啊,是咱们正向来数第二个啊,如果要按下标来算的话,它属于下标为一的元素,嗯。第二个元素啊,下标为一,好,那我给它等价替换一下,下标为一,它是不是就等价于咱们现在写的这个this对吗?我点死掉,诶靠这个就可以了啊,点死掉。好吧,那你来看一下,前面第零行我给它设置为了666,第一行先设置为666,后面又给它重新设置成了red,那我问大家了,同一个元素写两行是不是后面的代码会干什么?诶,覆盖前面的代码。
15:15
那现在大家能不能明白这个排他的道理,是不是就在这里了呀?对吗?其实在做的是什么?是对应下标的这个元素,两行代码,后者覆盖前者。相同下标的DD元素的字体颜色再进行覆盖操作。啊,他们是在进行覆盖,而你的零下标和你的三下标,他俩是在干什么,真正是在做设置。而其他未点击的元素都是在进行重新设置颜色。
16:02
诶,都是在进行重新设置颜色。好了,这样的话呢,咱们就完成了,点击单行。诶,第一行DL当中,它文字颜色排它的效果。
我来说两句