00:00
在上次课程当中啊,咱们已经实现了点击这些商品参数之后,它的一个结果显示,本次课程呢,咱们将继续来完成删除这些商品参数之后的一个效果。好了,怎么样看到了,我点击点击点击点击现在的结果为黑色128移动和电信优惠,假设呀,我这四个结果,我在进行删除的时候,不一定我是一个一个按照顺序来进行删除,有可能我先删的是移动版,再删的是黑色,诶最后再删的是咱们的电信优惠版,这个顺序怎么点都是有可能的。对吗?诶,好了,那么就得想一想啊,我现在所点击假设为128,那么你观察一下我点好128这个结果是不是消失了,对吗?除了它结果消失之外,来你观察对应128这一行发生了什么事情呢?128它里边的这个结果是不是变成了灰色,而默认的第一个位置的颜色又变成了红色。
01:24
也就是说我需要知道我点击的这个结果在对应之前的第几行里边,比如说我点击的是移动版,好点完,那么当前在选择版本的这一行上面,移动版就变成了灰色,而咱们的这个公开版,诶,默认第一个参数,它的文字颜色恢复成了红色。好,那么首先啊,咱们需要先找到这些A标签,让它发生点击事件,再来确定我到底点击的是第几个A标签,来,咱们找到之前所写到的这个函数。
02:11
把之前写好的呢,咱们都给它折起来。嗯。折起来。嗯,在这个位置啊,嗯,在这个位置呢,咱们来往下找一找,是在这儿,嗯,AR来进行遍历的时候,咱们是不是才产生的一个A标签对吗?嗯,好,那我就得想啊,现在A标签已经形成了,对吗?嗯,来接着在里边后面去写啊,获取所有的A标签元素,并且怎么着啊,循环发生点击事件诶,获取所有的A,然后呢,让它循环发生点击事件,好,嗯,在这呢,咱们给他写上一个a no,一定要注意啊,上面的这个变量你叫a no,这你就不能再叫重复的变量名了,容易有问题啊document点上select o,嗯。
03:19
PAR the letter o,我先把这行注掉,怎们找一下对应的一个元素,把这个页面怎么给它跑起来。来点点点点点完了之后,我点击右键检查怎么找到A标签在哪了,是不是在mark当中了,对吗?哎,在mark当中了啊好,来,把刚才咱们写好的这段文字呢给它展开,把这个词呢给它填进去,来cancel.log打印一下a nose变量。来点,嗯,现在我是不是拿到了第一个A对吧,来我再点。
04:04
此时我这是不是获取到了两个A,嗯,我给它往上挪一挪啊,这咱们就拿到了第一个A,拿到了第二个A,好,那么现在A元素咱们获取完了之后,我需要让它循环发生点击事件,但是写循环一定不要下意识写I变量了,为啥呀,你别忘,你别忘了啊,咱们现在是不是都在最外层的for循环,诶,这个是I变量,是在它里边嵌套来完成的。哎,所以像I呀,勾啊,K呀这些都不能再用了,诶咱们要换一个老师,这换啥呢都可以呀,诶咱们换一个N吧,比如说N等于零,然后N小于a no集合的长度,然后N加加,嗯,然后啊,让这个集合当中里边每一个元素都发生点击事件,好,那点完了之后我就得来思考一下,嗯,来,咱们还回来啊思考来走,假设我现在点击的是银色和移动版,对吗?我呀就点这个移动版当中的这个叉,那你说。
05:20
我点完了之后,刚才咱们看到的效果是啥来着,来我再点一下移动版啊来走看到的效果是不是移动版所在当前行里边,它把它第一个元素的文字颜色设置成了默认红色,而其余所有的恢复成了灰色。也就是说,我得知道我点击的是第几个叉吧,对吗?那你说我怎么知道我点击的是第几个叉啊?你说老师这不正常吗?数一下呗,这不就是第零个吗?这不就是第一个吗?你别忘了,咱们现在写的时候我点有可能我先点它对吗?也有可能我再点的是它,我一定是一个一个按顺序去点吗?
06:11
不一定。啊,因为你别忘了,咱们原来在这进行渲染这个结构的时候,是不是一个非零,所有的元素一个一个来进行显示,只有当你现在这个内存容量里边有选择结果了,它才是会按照对应的下标是不是放到中间的这个位置。如果我没有选择内存容量,那么现在是不是也就只有银色和移动版这两个元素在这里?那你能说它的下标为零和一吗?不能吧,耳是应该是什么?诶,零和二啊。对吧,诶,你别忘了,原来咱们在进行写这四行结构的时候,是不是就按照下标来画的它的DL。
07:05
这是第零行,这是第一行,这是第二行,这是第三行。那么我现在对应行上面是不是选完的结果,诶有个叉,那这个叉是不是也得跟着我原来的这个下标得是一致的,对吗?嗯,老师这个道理我也知道,那你说我咋整呢。诶,那你就在想啊,你原来在画这个叉的时候,我不光把这个叉画上去,顺便我把它身上去加一个属性来标识,这是第零个叉,这是第二个叉,这是第一个还是这是第三个,那当你后期在进行发生点击事件的时候,他身上是不是就已经有了一个下标的标识。
08:00
那有标识了,我后边是不是就能够用这个标识了呀。诶,所以这怎么办,追根溯源往回倒,哎,所以这个功呢,它其实并不麻烦,只不过它就是什么相互之间连带关系上比较麻烦一些啊,相对比较麻烦一些,来咱们往前找吧。在这个位置,这是不是咱们写的创建A标签。对吧,诶创建A标签啊,我不光要创建A标签里边去给他设置这个值,我是不是还得在他的身上添加什么一个下标。好啦,咱们在这儿再加一行啊,并且设置下标ano的点上,诶最好呢,你可以让他后期能够好获取,咱们用一个set attribute方法。诶,Set at tribute方法写上一个下标的名称,假设咱们叫index,那咱们想想我的值来自于哪里?
09:06
诶,这个下标不就是0123吗?对吗?那你得往回倒一倒,你在这个写A的前面是怎么写的,是不是数组循环变历写的对吗?那数组里边有值是不是就一定会有下标啊?哎,你别忘了人家的这个for each里边的第二个参数是不是就是index,把它借过来不就得了吗?诶,把这个index借过来,当然这个index来自于是数组元素的下标,而这个index是咱们为了写入到超链接身上的自定义属性名称。这个位置你可以随意来写。啊,你可以随意来写啊,好,那么现在咱们啊,这个点完之后,咱们再去看一下他身上有没有index这样的自定义属性。
10:00
来点击两个其实就可以了啊,一个都能看得出来,来右键检查你发现它身上有没有一个标识了,有了index是不是等于为零了呀。对吗?好,那index为零了,诶这个位置解决了之后往后看,我现在这个A点完了之后,我是不得知道我点击的是第几个A,怎么着,取出他身上之前记录好的index下标吧。写上咱们获取点击。的A标签身上的index属性值,好,咱们需要列一个变量,假设我叫IDX。一嗯,为了咱们防止它不重名啊,This,这个this是不是你所指向你真正点击的那个A元素对吗?A点怎么着?你用set a tribute方法来进行设置的,那么我是不是得用get tribute方法来进行获取?写什么名index,因为你之前写的时候是不是叫index,那我拿是不是也得叫index对吗?嗯,pencil.log呢?怎么去打印一下idxe好。
11:26
在这里啊,咱们先给他点点来选完两个之后,我点他身上为零,我点他身上为一没问题吧,是不是已经确定了我当前所点击的这个A元素,来再来一个电信优惠版几呀三下标没问题吧。对吗?嗯,下标拿到了之后,好,那咱们就得来想一想,首先看到的一个效果就是什么,我点完了之后,当前所删除的这个元素对应行里边第一个。
12:03
诶,它的这个值文字颜色恢复为红色,而其他的还是为灰色,这是咱们现在能看到的,但是你别忘了容易漏掉的一个点是啥呀,你之前怎么给人家加到上面去的。来,我点点点点还记得不,我之前所点完了之后的这些数据,是不是咱们给人家存到一个数组里边了,初始值为什么0000,初始是不是都为零啊?那我问大家一下子啊,假设我现在这个位置我存的不是零了,而是什么移动版,好,那我问你,我把移动版这个元素删掉之后,你是不是还得在这个位置上干什么恢复为零啊?对吧,其他的这些我还是都为银色128G和电信优惠版。
13:06
好,在这里,诶,咱们还得需要在这儿再加一行注释说恢复数组中对应下标。元素它的里边的一个值,嗯,好,AR中括号I dxe等于为零,嗯,cancel.log,咱们去打印一下AR,看一看效果。来走走走,我点了三行,隔过了内存容量,我先点击咱们的移动版。诶,点击咱们的移动版,发现了一个事情,移动版。诶,是不是为零对吧?诶,因为我默认的这个内存容量我没有给人家加进去,所以它默认就是为零对吗?再来电信优惠版,这是不是很明显重置为零了吧?我再点银色是不是所有的都为零啊,只不过有的是没有点,有的是进行重置了对吗?嗯,所以这个地方千万不要忘记啊,好,那么数组还回来了之后我还得怎么着,找到对应下标的那个DL行中的所有的D元素,嗯,所有的DD元素,好,在这儿咱们去加上一个滴滴。
14:38
累吧,嗯,那就不叫DD no了啊,容易,咱们的变量重复等于当前DL。啊,DL这一行里边对应的。你删除里边对应的那一个DL来,我先不往后写,怎么啊,先在这去打印看一看,你是不是真的能定位到它来,我点128G走,这是不是咱们所需要的第二行点来,我再点。
15:15
优惠移动版走,这是不是你要的最后一行DL好,DL定位好了之后,我就可以放心的在这继续点上什么call is letter o,找它里边所有的弟弟,嗯,找它里边所有的弟弟啊,来点128走,那么现在这里边是不是一个十六六十四幺二八和256,所有是不是都有了,对吗?我需要做的是啥呀?便利所有的DD元素,嗯,来,再来一波for循环,YM等于零,然后M小于d d list里边的一个长度,然后M加加,然后遍历完了之后我需要做什么呢?需要是默认的第一个DD文字颜色恢复成红色,而其余。
16:16
鱼的所有DD的文字颜色为灰色,好,这两个你先写哪个都可以啊,DD list里边中括号m.still点上color等于井号666,然后让咱们对应第一个DD DD list里边的第零个点上style,点上color等于right,诶,这样的话咱们对应的实现它的删除,基本的架构就写完了,来走。256移动版,诶银色还有电信优惠,嗯,来我点击256来观察啊,来点点完了之后,当前的这个位置里边的颜色是不是就OK了。
17:07
对吧,诶OK了啊,然后移动版OK了,电信优惠OK了,然后银色也OK了,好,那么现在颜色OK了之后,咱们是不是还得把上面的这个元素得怎么着干掉吧,对吧,诶给它干掉啊。好,那么想要给它干掉的时候呢?咱们需要去找一找它的副元素叫什么truth,对吗?利用truth来把你对应的这个mark div是不是要给它删掉,对吧?这是咱们点击A标签之后所要干的这些事情啊。删除对应下标位置的mark标记,嗯,Mark标记啊,好,那么现在咱们的choose点上remove child,当前你所点击的这个this是A,它里边的parent no是不是就是咱们的那个mark的div,对吧?嗯,来,再走一遍啊,银色128,然后电信优惠和移动版写好了之后,我先删移动版,它下去的同时文字颜色是不是也搞定了,银色128还有咱们的电信优惠,好,那么此时咱们这里边的一个逻辑效果就实现好了。
18:27
嗯,就实现好了啊,来咱们再稍微捋一下,因为啊你要点击所有的A标签对吗?诶,咱们需要再进行绘制完所有的A之后,不要搁里边做嵌套啊,绘制完所有的A标签之后,再单独的把所有你现在创建好的A给它都拿出来,拿出来了之后循环发生点击事件,因为你得要知道我点击的是第几个A,怎么办?在你画这个A标签之前,在他的身上加上一个下标的值,方便后期来取。好那么取出来了之后,我需要先把数组对应的位置先给它还原,再找到对应当前的那个DL行里边的那些DD,把颜色处理一下,最后别忘了怎么着把那个mark标记给它删掉,诶,给它删掉啊,好了,这样的话。
19:27
那咱们就实现了点击删除按钮来删除对应参数的一个数据功能了。
我来说两句