00:00
在上次课程当中啊,咱们已经实现了删除对应结果里边的一个功能,那么本次课程呢,咱们将最后来实现一下关于商品参数的价格变动效果,来咱们观察一下啊,我选择银色上面的价格为5339128,变成了6239移动5239优惠移动最终变成了是4999,也就是说无论我选择什么样的参数,它的价格是不是都会发生变化。对吗?好,这是咱们点击之后发生的变化,再看我选完的这个结果,删除一个删除删除删除它是不是也会有变化,最终形成了5299的初始值,好,那既然啊,这个功能当我点击参参数的时候需要,还有我删除这些参数的时候也需要,那既然是这样,我何不把这个功能怎么着单独列为一个函数,在你点击的时候调用,在你删除的时候一样也调用,那么是不是就达到了功能的复用了呢?嗯,来,怎么在这里加上一行注释?
01:22
叫做价格变动的函数声明,好,来上一个function,起个名称吧,咱们叫做a change press,但是你不要让它下意识的怎么着啊,搁这就自动调用了,因为咱们刚刚说过这个函数需要怎么着啊,这个函数是要在点击DD的时候以及删除mark标记的时候才需要调用,所以不要下意识直接声明完了函数顺手你就去调用了啊,哎,这个下意识咱们不要产生啊,每次调用都需要来思考一下,是不是真的页面加载的时候就需要它立即来完成好。
02:16
那么现在这个函数写完了之后,那咱们得想一想,它的思路是什么呢?诶,这个函数它最终要干的事是啥呀?那你想吧,无论你点击之后它的结果是多少,最终是不是都得要显示在这个位置上。我的意思是不是很明确了,把这个元素标签是不是得拿出来,对吧?哎,咱们来把这个页面咱们运行一下啊,咱们自己的让它跑起来。嗯,来点击一下这个位置,找到对应的标签是在这里。写上第一步获取价格的标签元素,嗯,获取的价格标签元素啊,好,我在这写上O的price,证明它是一个已有的价格,顺便咱们把获取到的这个元素给它拿进来,好,元素标签有了之后,第二步你想啊,我现在是5299对吗?默认是5299,当我点击银色,它就变成了5339。
03:34
好,那也就是说增加的这个数据应该在银色这个数据身上本来就带着的吧。是不是,诶,咱们观察一下咱们原来渲染时候的那组数据啊,之前这一组数据,咱们是不是只是需要了一个type,把这些文字给显示上面了,而人家还有一个change price咱们没用上呢,这变化的40是不是就应该在我点击这个DD的时候,我就应该知道,诶,银色它变化的价格为40块钱。
04:16
然后再让我的5299加上这40块钱,重新把这个结果显示到哪儿这个P标签身上。是不是这个道理对吧,诶好。那咱们的思路第二步就是什么。给每一个DD标签身上默认都设置一个自定义的属性,用来记录变化的价格,因为你只有像刚才咱们在这个A标签的身上记录一个下标,那么我点完了之后,后期我是不是才能方便来进行获取,那咱们的这个DD道理不也是相同的吗?
05:04
对吧?诶我点完它之后,那我就得知道它身上变化的价格是多少钱,无论是多少钱,诶是零元也好,还是大于零元也好,还是负的也好,我只需要把这个数取出来,然后和我原来的5299去相加,不就得了吗?对吧,诶,所以咱们需要来进行一个记录,好,那大家想一想,记录了之后呢。诶,元素我也拿到了,哎,我也给每一个弟弟身上呢,我也去加了一个价格的属性了,然后怎么办,是不是我在进行点击这些DD的时候,把你这个价格是不是得想办法取出来呀。对吧,好取出来,那我问你了啊,我点击黑色你能看到的效果,第一颜色变化,第二价格显示,还有咱们的结果在上面有所标记。
06:06
那么我就得不免来想一想了啊。是不是咱们现在把所有的结果都放到哪去了?同志们,哎,你说老师,我放到choose的那个div里边了,没毛病,但是你别忘了,你后面用的数据是不是都在AR里边了呀?对吗?诶都在AR里边了,好,那么如果我要知道点击黑色之后它的价格假设,诶假设啊,它上面标注的价格为60块钱。啊,为60块钱,我何不把它整体。想一想啊,由于你点完了之后,你又需要他身上的文字,又需要他身上的价格,那我何不把它整体的这个DD给它拿出来,然后该加价格的加价格,诶该显示文字的呢?我去显示文字是不就一举两得了呀?
07:13
对吧?哎,咱们之前只是说先把文字取出来,但是现在由于我的需求上,哎,还没有实现完,发现之前的一个内容,我只需要稍稍做一下调整,就能方便后续内容的一个推进,嗯,来,咱们找到之前的一个位置。找到之前的一个位置啊,咱们来看一下咱们参数的一个绑定,来往下走,往下走,走到哪里呢?走到这里这个A啊,原来存的是不是只是一个文本,对吗?现在我需要把点in the test给它删掉。诶给它删掉,然后这里边存的是不是就是一个DD,那么弟弟身上的那个价格往哪走呢?那就得往上再推一个函数。
08:07
诶,应该是在这里,诶咱们不光要给这个DD当中去加文本,是不是这个DD它里边还应该有一个自定义的属性,怎么给它起一个名称吧,就叫做press,它来自于数组当中,咱们刚才所看到的change price的值。好,这是咱们给每一个DD身上都加了一个自定义属性,对吗?那么我现在把整体的这个DD元素都交给了arr,好,那你往下看,会不会你这里写完了之后影响到了后续的某一些位置,诶,这是问如果你现在数组当中里边只要有值,我去画这些元素,好那我问大家了啊,这的这个value指的就是什么了,是不是就是DD元素本身了呀?我得怎么办点inner test是不是从DD标签当中把值给到它的这个元素上面?
09:14
对吧,而不再是咱们的这个value元素对象本身了啊,所以这千万要记得给它修改一下子好。那么在这写好了之后啊,那咱们来再切回来,那么元素写好了,用来记录一个价格,嗯,那么价格写好了之后,那咱们的第三步要干啥呀?是不是要遍列AR的那个数组啊,嗯,便利AR里边的一个数组,然后干什么?将DD元素身上的,诶,新变化的这个价格和已有的价格,就是咱们初始化的5299相加,嗯相加,然后最后将计算之后的结果重新渲染到P标签当中。
10:16
嗯,这个呢,就是咱们价格变动当中的一个思路,好,那么第一步咱们的价格标签我叫做原价格标签元素已经,哎获取了,诶已经获取了啊好,那么第二步,第二步呢,我需要给它来进行记录,对吧,记录咱们也写好了,那么第三步我需要来遍历arr数组,嗯,变立AR数组啊,来for循环,Yi等于零,然后I小于AR里边的一个长度,然后I加加,好,那么在这我就需要来想一个问题,这个arr哪来的?
11:07
当前这个函数里边有出现过AR吗?没有啊老师,那我是不是得知道我点完了之后,对吧,上方这个AR里边有哪些非零的元素,那我这个函数是不是得首先搁一个位置去做调用啊,因为不调用里边的这个AR数据是不是传不过来呀,对不对,诶咱们首先先在一个位置上面去做调用啊,来往回推找到咱们现在的这个AR的位置搁到这儿做一下调用,把你现在里边DD的这个标签是不是给我当做它的参数传进来。对吧?好,那么你这传的是叫函数的实参往下推,那么你在函数声明的时候,这是不是叫有刑残对吧?你给我什么样的数组,那么我就去看一看它的一个数组,好,咱们去让它cancel.log打印一下AR里边的每一个。
12:17
来刷新啊,当我点它之后来你发现了现在这个位置里边的银色的price,我是不是就应该能拿到了。对吧,诶,那拿到了啊,来点击移动版,那移动版身上的东西是不是就是负1000。对吗?哎,就是负1000啊好我呀在这咱们看到了不光有DD,是不是还有一些零,因为什么,因为我没都点呢,诶没有点过的是不是就初始化为零啊,所以你在打印的时候是不是得加一个判断条件啊。如果ari,什么叫如果ari,只要你这个条件它不为零。
13:02
我是不是就是可以能够进行打印对吗?来点击移动版,那么就只有移动版点击256个G。好,我要拿的就是它,对吧?好,那么我现在需要的是把ari当中它里边的那个价格给它取出来,点上get a tribute price。来点击银色40,点击移动版付1000,点击咱们的优惠移动版为负两百四好,那么现在啊,这些价格很明显,它是一个什么样的数据类型字符串对吗?而原来咱们再去写的这个标签里边的值。应该是一个数对吧,咱们只有数和数之间是不是才能做正常的运算,所以怎么办?咱们需要让它数据类型的强制转换,诶数据类型的强制转换啊,强制转换的时候啊,你可以使用number,也可以使用PAR in或者是PAR,但是考虑到这个价格呢,不一定它是整数,所以你可以使用number或者是PAR float,诶在这里啊,我就用了一下number的方法,好来咱们再点,此时它是不是就变成了number当中的40,好这呢就变成了一个300,嗯,那现在的这个数组当中的值啊已经有了,下面我就要去干什么,和已有的价格来进行相加。
14:44
用一个变量,诶给它先存起来Y千之press,诶变化的这个价格,然后呢,咱们需要在for循环之前还得怎么着取出,诶取出默认的价格叫做。
15:06
Price吧,诶,咱们就给他定一个叫price啊,然后呢,这个price里边的值咱们需要在date.gs里边来获取,在哪里呢?在这里,嗯,来一层一层找吧,把这两个先折起来,它是在good date点上good detail。点上一个price,诶,它是在这里,好,那么现在我的最终的价格是不是就应该是price等于它原本的这个价格再加上一个新的价格,诶,当然在这个位置啊,你也可以写成什么加等于change price都是可以的。好那么现在这个价格写好了之后,我是不是要重新贴回到之前的标签,On the press,点上in the past等于。
16:01
Price诶等于price来咱们去运行看一看这个效果。我点击银色A5339128移动版,还有优惠移动版是不是为54999对吗?嗯,好,这个功能啊,咱们已经实现了,下一个位置就是要实现什么,我点击这些删除按钮之后,是不是价格也需要变动?好,那咱们的这个函数还得需要搁哪调用啊,往上推是不是你这些A标签在进行点击的时候的那些arr啊,对吧?诶再来一行调用咱们的价格函数,把它拿进来给AR传递进去,因为你删一个,那AR当中里边是不是对应的那个位置为为零,然后我在这儿是不是还给你排了一下,只要是不为零的,我是不是才给你做加法,为零的我就不算。
17:08
对吗?诶两个位置咱们都需要来做调用来走一遍啊,银色128移动和电信优惠来山山删删是不是就删回了5299啊。好了,那么本次课程呢?咱们就完成了价格变动函数的首次封装。
我来说两句