00:00
在上次课程当中啊,咱们已经完成了选择搭配整体它的一个布局效果,那么本次课程呢,咱们啊将继续来完成其中中间的这个部分复选框,选中之后右侧它套餐价所变动的这个效果。诶,这块呢,由于它是一个新的功能,所以咱们需要单独再列一个函数写上,咱们选择搭配中间区域,嗯,中间区域复选框选中A套餐价。变动效果,嗯,是这个道理啊,来咱们啊在这里边去加一个函数,叫做出丝price吧,嗯,变动的价格啊,变动的价格,来咱们在这儿去加上一个调用,嗯,当然这个调用呢,咱们是看到了,因为我选择的时候点击它就直接会发生变化,对吧?诶直接发生变化啊。嗯,好,来咱们去看一下它的思路如何来实现,嗯,思路如何来实现啊,首先大家来想一想,第一步我是不是得先把当前这个中间区域里边所有的这些复选框元素先拿到,然后便利这些元素,然后从这里边去找一个选中的,两个选中的,或者有多少个选中的,把他们选中的里边的这个值50块钱,有一个选中的拿50块钱,再有一个选中的好累计多少钱了?
01:43
100块钱了。让这个100块钱怎么着,诶和咱们现在这个套餐价去做一个相加,然后等于多少5399。啊,5399好,我问大家来下一下啊,这个如果我现在是选择两个,它相加100对吗?那如果我取消掉一个,它是不是得在5399的基础之上减50,再取消一个,是不是又变成了5299?
02:14
对吧,诶又变成5299了啊好,这是咱们对应的一个思路来写上吧,第一步先获取中间区域当中所有的复选框元素,诶,所有的复选框元素,然后第二步。电力这些元素,诶,取出它们的价格。进行累加,和谁累加呢?你现在这是不是5299对吧,我写一个再写一个好好算,那么它是5299加100,那么这是不是变成了5399对吗?嗯,所以你可以和。
03:01
A和左侧的基础价格进行累加,累加之后重新写回咱们套餐价,嗯,标签里边,诶,需要重新写回套餐价标签里边,来吧,咱们看一下啊,第一个位置咱们需要先获取复选框的元素。找到这个元素,咱们把咱们的页面给它跑起来啊,来右键。找到这些元素,点击右键,咱们看这没有单纯的一个样式对吧,没有关系,咱们给它自己填上去啊,找到它的,诶从里面也可以。来,在这写上ipts等于document,点上记住一定是quary o,然后LY里边,后面自己再添一个input。
04:09
cancel.log里边咱们去加一个ipts,看一下这个变量你有没有正常的拿到,嗯,来,现在啊,咱们这些复选框是不是都已经正常拿到了,对吧?嗯,拿完了之后咱们还需要怎么着和左侧基础的价格进行便利累加,所以你可以先把左侧的标签元素价格先给它取出来。嗯,这样吧,咱们先遍历吧,第二个啊,先遍历这些复选框,嗯,遍历复选框呢,咱们去加一个for循环,Yi等于零,然后I小于IPTS的长度,然后I加加,那么在这里边我说如果诶,这还得加点击事件的啊,Ipts里边的每一个,当它进行点击的时候,这些复选框里边点击我是不是还得从当中干什么,挑出谁是选中的那一个。
05:10
来上一个负循环,咱们加上Y勾等于零,然后勾小于这些IPTS的长度,然后勾加加,我从这么多的复选框当中来进行挨个遍历,点击的时候看,如果这些当中有一个他选中了,Checked为真好,只要是有选中的,咱们就干什么需要让他。将左侧的一个价格加上你现在选中的诶,复选框的一个附加价格,好,那么咱们需要先获取一下这个左侧的价格,而且还得需要找复选框当中的附加价格,来吧,咱们看一下左侧的标签在这个是咱们的啊,左侧的标签在这里。
06:06
嗯,在这个P标签身上。来,最前面咱们获取一下这个元素叫做left price document,点上coror,嗯,来这个元素啊,拿到了之后咱们先cancel.log打印一下。好,元素拿完了之后,我要的是什么?同志们,我要的是5299,前面那个钱我需要吗?不需要啊,所以我搁到这个点击的时候,咱们需要给它进行截取,叫做order price吧,等于left这个。Div点它拿出来它的值。是不是in the task对吗?点上slice,是不是咱们那个截取其中一个方式SLICE1,好,这个下标啊,这个一代表的是咱们的下,如果你把当前,现在从前的这个位置一直到5299,把它当做一个字符串的话,那前所占的下标是不是为零对吗?那我需要的下标是不是从五开始?如果我给了一个参数,是不是从一下标以后,所有的部分我全部都要?
07:27
对吧,诶,我全部都要啊好。那么现在这里边的值拿到了,嗯,我说我现在的这个价格等于。这个新的价格吧,嗯,新的价格等于咱们左侧价格,左侧价格已经搞定了,复选框附加价格来往回找复选框身上有任何的值吗?没有,所以我是不是得给它加一个Y6啊,对吧?诶这个Y6就是你后面文本当中的这个值,如果你这写100,那我的Y6也是100,来再加上一个Y6,我把这个后面怎么给它粘一下啊,给它粘一下。
08:11
好,那么现在所有内容都已经齐全了啊,咱们只欠下最后临门一脚,咱们呢,让这个价格,诶,这个新的价格啊,咱们让它借助于这个变量等于。嗯,等于它自己的这个价格,再加上复选框当中的值,是不是就是ipts勾里边的这个Y6,但是这个Y6一般咱们取出来的都是字符串,所以怎么着强制转一下,诶强制转一下好,那么现在这个价格写好了之后,整体便利我需要让他做累加,累加完了之后的这个old price是不是一直在发生变化,对吗?诶最终怎么办?第三步。
09:01
重新写回到。不是这个回啊,写回到咱们的套餐价标签当中好了,那咱们就得需要找到套餐价。套餐价是在这个位置,也是它一个P标,呃,一个I标签啊,来把这个拿过来,把前面的部分呢,我们给它拿走,叫做new price,等于document,点上cor laor,来把这个给它拿进去,说现在新的这个套餐价,它里边的值等于看一下人家这是不是也有一个钱的符号,别忘了做一下拼接加加谁加这个old price啊,加这个old price,来咱们去看一下咱们现在的一个效果,嗯,选择它好,此时它是不是在5299的上面加了个50证明什么5299拿出来是不是也是一个字符串拼接了吧,怎么办?诶,搁这儿还得加强转。
10:10
嗯,还得加强砖啊,好再试一把点是不是变成了5349,再加5399,好撤回来,撤回来是不是就恢复成了5299。对吗?但是没有完啊,没有完,咱们现在看一下,当我点击在最上方的时候,这个位置是5399,这是不是还得变成5399,这是不是也得变成5399,对吗?怎么办?哎,你还得在上方咱们的那个change price band当中再加点料啊,再加点料啊在这。继续看一下之前写的是第几步了,第三步是吧?嗯,第三步啊,第三步当中咱们需要让他将变化后的价格写入到咱们的左侧标签当中,嗯,写入到左侧标签,好,左侧标签刚刚咱们已经拿过一次了,对吧?诶,所以我就不再写了啊,咱们给他拿过来就可以了。
11:24
拿过来看一下,在这个区域当中的left price没有用过是不是,嗯,没有用过啊,咱们就可以拿过来试一下,说它里边的值就恰好等于前的符号,诶,写过来。再加上price,诶再加price来咱们看一下啊,当我点击它的时候,这是5339,这是不是就也变成了5339来选择选择选择九,现在是4849,这是不是也是4849,好,这个位置咱们已经搞定了啊,再有我是不是在这儿点完了之后的一个基础上,我让他选择选择这个位置是不是也得要变。
12:09
对吧,诶,这也是咱们刚才所写过的一个变化啊,写过的一个变化,好,那咱们来看一下,点击点击点击点击现在是多少5049。但是5049我这儿有选吗?我这没有选对吗?所以套餐价得是啥,得是5049啊。对吧,诶得是5049啊好,所以在这个位置咱们还得要加上一点判断啊,加上一点循环判断。判断啥呢?如果我现在这些复选框当中里边有选中的,好,我就直接把选中的给你加进去,如果没有选中的,那你的这个位置的值是不是得跟我现在这个结构得是一样的,也是5049对吗?嗯,好,继续第四步,需要来进行便利选择搭配当中所有的复选框元素,看是否有选中的,看是否有选中的啊来咱们啊,这个复选框好像刚才也是拿过了,对吧?诶把它也拿过来借用一下。
13:20
你说老师咱们现在这些拿过来的变量以前有过,能不能行,当然可以啊,因为咱们就是为了保证它现在变量当中不会进行重名覆盖,我是不是才写的这个函数,所以它的作用域是不是都保持在当前它自己的那个函数里边,对吧?即使重名了有关系吗?没关系啊,没关系,好,我在这只需要进行变历就可以了,看一下前面是不是也有用过I变量啊,哎,咱们也给它换一下啊,勾等于零,然后勾小于ipts当中的长度,然后勾加加,然后我只需要问就可以了,因为点击在这儿吗?点击不在这儿,咱们单纯点击的这个效果是不是已经在出price里边实现过了。
14:08
对吧,哎,我只需要问这些啊,复选框当中的元素有没有选中的,如果有,诶如果有怎么办?我需要让我的这个价格在它基础之上去加上它的附加价格,如果他没有好,那么我就要右侧的套餐价。价格重新渲染,甭管你有还是没有我的price,就看他到底走不走这个for循环。诶,他到底走不走这个佛循环,看看它里边是不是真的有这些选中项啊,来右侧的标签是在这儿对吧?来再拿过来借用一下。
15:02
那么这个new price这个标签,它里边的值别忘记,这还有个什么前的符号,诶,还有个前的符号啊,来再加上price。来看一下吧,现在是52993处都为5299对吗?来点击这变成5339 5339来选择选择选择,现在是49993处的位置是不是都发生变化,然后我选择一个选择两个,那么说它是不是在4999的基础之上,是不是给我变成了5099。对吧,诶,这是咱们所对应出来的一个结果啊,所对应出来的结果好了,这样的话,咱们就将所有关于价格选中状态联动的效果,咱们就实现完毕了。
我来说两句