00:00
在上次课程当中啊,咱们啊已经实现了我的选择之后结果的布局。本次课程呢,咱们将真的动态来进行实现,我点击哪一个商品参数,那么它才给我实现一个对应的结果mark标记。来,咱们再来想一想。咱们的这个效果是不是需要得点击每一行DD之后来进行显示的对吗?好,这啊,就不是单纯的一个功能了,它需要结合于咱们刚刚所写好的点击商品参数之后的这个函数,这个函数的功能很强大哟,诶,咱们来找一找吧。这个位置啊,在329行呢,是咱们的点击之后的效果好,这呢是它的文字颜色排它我只需要在它的后面写上。
01:00
点击哪一个DD元素产生。或者叫做动态的。产生。一个新的mark。标记元素。那么大家就得想一想啊,我创建一个元素对象对你来说难吗?不难。啊,就是一个什么create element元素的这个方法。对吧,诶,再让你对应的一个副元素来进行a pen child来进行追加,它就两句话对吗?但是。啊,但是我现在。是不是我点击哪一个。哪一个才进行创建,而其他不点击我就不创建。那么我的意思也就是说,我得知道我点击的是第几行里边的那个元素的值吧。
02:02
是不是这个道理,来给大家去画一下,当如果我点击的是D0行DL里边所有的这个DD,好,那我就直接在最上方应该有一个什么,有一个容器。啊,专门来存储你所点击的这些数据里边的容器。啊,当然现在这个容器的话,你可以想到的有什么,有变量对吧,单纯的四个变量,或者我让它一块都放到了一个数组里边也是可以的。啊,利用一个数组,将你每一次所点击的这个数据给它填进去。啊,给它填进去好,我只要点击了第零行里边的这个银色,我就对应的数组当中零下标的位置加一个银色。
03:02
但如果说我点击的是第一行DL里边的128,那么我就在第二个位置。在这儿加一个什么128G。好啦,下标。是不是要对应上。这是咱们的第零行的DL对吗?诶,我再给你来条线啊,这个是咱们第一行里边的DL下标要对应。我下标对应了之后,我是不是得把我点击的这个DL元素里边的值,是不是想办法给你写入到对应下标的数组的那个位置上。你说老师你这么一说好难好复杂呀,确实啊,这个呢,也是咱们当前这个项目里边最复杂。
04:01
不太好想的一个地方。啊,你说复杂吗?你如果真的把这条线捋下来了,你真的实现了两三遍了,你发现他也好像没有这么难,但是诶,从头来的第一遍永远是最困难的。啊,万事开头难啊。来我呀,首先第一个件事儿,我得先干什么,先得准备一个这样的容器,预备着你点完了之后,我是不是得往里面去装这些值啊,对不对,嗯。来,咱们在这写上一点啊。这是咱们之前说到的文字颜色排他来,接着往下写。这个呢,是咱们点击DD之后产生的mark标记的思路。嗯。
05:00
他之后的一个思路啊,而前面的这个思路呢,是咱们每一行第。D、文字颜色排他的思路。啊,文字排他的一个思路,啊,两段思路都不一样,那么现在这个思路里边的第一步,首先。先来创建一个。可以容纳点击的DD元素值的容器,当然这个容器啊,咱们以数组为例,因为数组的话是最方便的,为什么呢?因为你的DL的集合是不是有下标,那么有下标可以一次性放所有的值,是不是也就只有数组?哎,你说老师我用四个变量行不行?当然也许是可以的,但是你不嫌麻烦吗?诶,有简单的,为啥不用呢。对不对,诶来。
06:01
那么现在这个数组有了之后。那么数组当中应该装多少个这样的值呢?起始长度你是不是要先确定一下?诶,来确定数组的起始长度,它应该装多少个,是应该装四个还是装六个,还是装多少个,对不对,诶要先把它的长度确定,然后。再将点击的DD元素的值。按照对应下标。来写入到数组的元素身上,就这两句话,哎,你把它实现通了,都不简单啊,都不简单,好,咱们先来实现第一件事,先来创建一个数组,在负循环之前,咱们啊玩一个arr,等于,当然你可以使用这种字面量的方式,没有问题,或者给大家再提供一个是不是还可以使用构造函数的方法。
07:10
你说老师这有什么不一样的吗?哎,那你想吧,New read这个构造函数里边,它是不是可以支持加参数啊?那么加参数允不允许提前来设置数组它的预定长度啊,可以的嘛,对不对,诶,那我恰好是不是应该为DL的。集合长度啊,应该有几个元素四个嘛,cancel.log打印一下A。诶,不是这个啊。来,咱们把页面给它跑起来。点击检查,然后看一下现在这个位置里边是不是一共有四个空位置,你说你让他空着,何不给它填点默认值呢,对不对,诶来咱们给它加点料啊,确定完数组的起始长度,诶在。
08:06
添加一些默认值,你说默认值我加什么呢?你加空字符串也行,诶你加那也可以,或者你更简单的,我写一个零占个位置行不行,证明当前的这个下标位置里边有东西吗?没东西啊,数字零啊数字零好,我用什么来给它加呀,用一个方法叫做few填充,往里边填充的都是为零。数组填充值,诶数组填充值啊好。填完了之后,咱们接着给他打印一下这个AR,看他填没填进去,填进去了吗?填进去了诶这个位置咱们刚刚写过的这个注释。好杠杠的这个测试啊,咱们就给它烧掉了啊,没有用了。
09:01
好,在这咱们把这个结果给它标一下,此时这个数组已经就位了啊,四个零,好,它就位了之后我得去找吧,我点击的那个元素是不是叫做this啊,那它里边的值cancel.log是不是叫做this.in the past对吗?嗯,来看一下啊。当我点击金色、银色、黑色值,是不是很简单,难拿到?但是我要按照对应的下标来给它填进去,而你DL的下标是不是对应跟咱们数组的下标是一致的,好,那我这应该怎么写啊,应该是A22。等于this.in the test。来在你点击之后啊,再来输出一下咱们的arr,嗯,刚才的这个输出呢,我就给咱们注掉了啊,是咱们一个测试。
10:07
来点击金色,此时第零个位置是不是就是为金色,其他我没点呢,都是为零啊,我点移动版是不是在第三行的位置,它是移动版,其他两个没有点,是不是也为零,达到了你想要的效果了吧。是不是好下标确定了,数组也加进去了,然后呢,我是不是得想办法把这个数组的结果按对应里边非零的有效的这些数据。给你显示在上方吧。是不是,诶来。来上一个便利。便利。arr数组将。非零元素的值写入到mark标记当中。
11:07
当然这个里边的一个便利啊,你还可以使用for循环,但是咱们真的嵌套for循环太多了,诶太多了,再来一层,咱们就属于四层for循环了啊,当然并不是不可以,只不过for循环要写到two了,咱们换一换,还记不记得数组里边是不是有一个循环叫for each。点for对吧,里边呢去传一个函数,在函数当中有一些参数,如果你忘了来老师教你一招啊,这属于必杀技,来把鼠标放到上面。看到了吗?嗯,在这里啊,我教你一招必杀技,万一你在做开发的时候,我忘了这个方法里边的参数都有什么,它的顺序是啥都懒得,百度都不需要,百度直接Vs code就能够紧急救命。
12:00
好,先看这个位置是不是叫做call back Fn call back什么东西啊?回调FN很明显它是函数的缩写对吗?也就是说咱们for each,它里边的第一个参数是不是一定要加函数,再说老师你说我单词不行啊,怎么办?我再教你一招,这是不是有括号啊?是不是有括号,诶在这呢啊,什么东西会有括号,是不是咱们的函数啊。对吗?诶,很明显,函数括号里边有一个值逗号,再来一个值逗号再来一个值,你猜都能知道,这玩意是叫行参呐。第一个是不是咱们数组当中的每一个元素下一个下标,然后瑞元数组来吧,你需要都写吗?不一定,你需要什么就写什么就可以了啊来在这去加上一个value。
13:01
我说只要是我现在里边非零的元素。那我是不是就可以直接写上一个if value?当然,你可以写上if y6,什么不等于零。对吧,因为IF0其实就是为甲,你也可以简写成if y6。对吧,因为if假嘛,它就不执行了,好,只要是为真的条件写上,只要是为真的条件,咱们就怎么着动态的来创建mark标签,嗯。Div等于document。点上。Create element。加上一个div。Mark div,点上class name等于mark,诶,这是咱们之前所写的一个结构,一定要匹配上啊,同志们啊,这写的是ID是吧?好,那我就给你来上一个ID吧。
14:09
咱们看一下之前的一个样式,是用的ID吗?如果是ID的话,我就真得给它改成一个。诶点了啊点比较合适一些,好把咱们的class name还原,然后把咱们之前写的这个位置,这其实都可以不用要了,因为它是动态产生的,都删掉,嗯。好,那么现在把它删掉了之后,诶,这个mark标记写好了,别忘了里边还一个啥,还一个A呢。嗯。前面是不是有A呀。呃,这个位置里边没有啊,之前写过的,它有一个提示啊,然后等于document,点上create element去加上一个A,好,A node,点上in the test,等于一个叉写好了,那么div是不是要进行追加?
15:08
A pen child,把咱们对应的一个A标签加进去,写上。创建div元素,诶,并且设置它的class属性,并且设置class属性。这呢,咱们写上创建一个A元素,诶,并且设置它的值,嗯,并且设置值好最后一句话。让咱们的div追加A好了,但是啊,你别忘了这个div它是不是也是一个创建的动态标签,那你找吧,它的副元素在哪呢?在truth上面,那你看一看truth前面拿没拿过呀?诶,没有啊,咱们得拿一下。
16:00
Truth。等于document,点上letter来找一下咱们的choose,先不用管这个错误啊,因为我还没有写完。来在这,嗯,这个位置咱们得要自己填一下啊。空格加上点choose,当然刚才的这个报错呢,也充分说明了这个方法是不允许没有结果的一个参数,对吧?不能是为空的啊,不能是为空的好,那么现在的这个猝死元素拿到了之后,我是不是就可以让他来进行循环,追加我需要的div?让choose元素追加div好点,A pen child来追一个div。嗯。那么现在它里边写好了之后,来咱们去做一下测试吧。
17:03
点击,诶,值咱们漏掉了啊,光加咱们的样式了,没有去给它加值来写上,并且设置值,嗯,Mark div,点上in the test就应该等于Y对吧?诶,这个value恰好是你数组当中的一个值,而数组里边存的是不是就是你DD当中所点击的那个元素,嗯。来咱们点一下金色上去了,对吧,来再点128,发现了点问题,128是出来了,但是还有一遍金色好像是不是追加了呀,来再点个移动版。真的追加了怎么办?是不是在你每一次点的同时,得把之前的内容清空一下,诶清空一下啊,来在这个点击在这个位置咱们写上清空什么咱们的处死元素,让你的处点inner h秒等于空,这就可以了。
18:09
来,咱们去刷新银色128,然后优惠一动是不是就OK了,即使你倒着点它也能找到对应的一个下标位置,这就是它的下标对应啊,这就是它的下标对应,好了,那么当前啊,咱们就实现了点击商品参数实现对应结果的动态添加效果。
我来说两句