00:00
Hello,大家好,那这个小节我们来做一个let的实践练习。那这里有一个需求,大家可以看一下三个div,然后点击其中的一个,使其颜色呢变成一个粉色啊这样一个需求我们一起来做一下,首先第一步的话,先来获取这个div的元素对象。啊,Let items等于一个document.get elements by class name,然后在里边把item放进来,获取完元素以后呢?下一步我们开始遍历并绑定事件。然后负循环,然后这个vari等于个零,然后I呢小于一个item s.Les I加加。在里边我们通过item s下标i.on click的方式来去进行一个事件绑定。那么在这儿呢,我们就要修改当前这个元素的背景颜色了。那我应该怎么去修改背景颜色呢?
01:03
咱们这块正确做法的话,应该是使用this,点点background,等于一个pink保存,然后点击点击点击它都好使。我相信呢,很多同学在学习这块内容的时候呢,都有一个疑问,哎,我能不能使用这个item si.on click等于一个function sorry,啊,这块咱们有点失了置了是吧?啊,Item s下边i.style.background。我能不能使用这样的方式来去改变颜色呢?一起来看一看啊,当然很多同学已经做过测试了,一起来看看一下,点点点发现不好使,打开控制台。在这啊,我刷新,然后点点点大家看一下会报错啊,Cannot read property style of unDeFi,为什么会出现这种现象呢?这里主要是因为这个全局变量I它出了问题。
02:03
这是一个循环体啊,然后呢,每一次呢,都会让ina自增它代码,相当于是这样子的。啊,我来演示一下v ari第一次等于零,然后下边第二次va等于个一,再来一次,把它复制一份拿过来,V等于一个二。那等我们这三次循环完成以后呢,最后I做了一个自增,那么此时I这个变量值呢,已经变成几了?变成了三,因为它并没有块级作用域,所以说I这个值啊,它一直是在全局当中存在的,我们可以呢来打印一下can log window.i。保存大家可以看一下。然后我把这个代码需要注掉啊保存。此时的话,它已经变成了三了,就是循环完成以后,I的值已经变成了三了,好,变成三以后呢,当我们去用鼠标点击其中某一个元素时,它就会执行回调,函数里边的这个代码就是咱们的事件处理程序,那么这个时候的话,Item SI它找不到是吧?函数里边找不到,好像外层作用去找啊,找到那个谁啊,Window window下边就有ii,所以说这个时候的话,Window下边这个H几啊,3ITEM s3点点8GROUND,这个时候就出问题。
03:23
为什么呢?因为咱们总共就三个元素,下标最大值为二,你这来个三,对不起啊,越界了啊,找不到那个目标元素,所以说就没有办法去修改它的一个背景颜色了,那么这个时候咱们可以怎么办呢?很简单,我们只需要把Y呢变成let就可以搞定这个问题。可以看一下我保存这已经刷新了啊,点击点击点击,为什么它好使呢,还是一样子。我把这个腕呢换成了let。我在三个代码块里边呢,声明了三个I,它们之间是互不影响的,就这个I只在这个代码块里边有效,这个在这个里边有效啊,以此类推,然后我们再把这个代码拿过来,当真实的去触发这个元素的啊,单机实验时候呢,这个程序就会执行。
04:15
那么这个时候去执行的话,发现I呢,在当前函数里边,函数作用里边没有,好像外层外层作用里边去寻找,哎,I等于零有了,所以说点击第一个元素就有结果,第二个呢也是如此,第三个也是如此,这样的话呢,就很容易的解决这个问题。所以说呢,咱们以后在写代码的时候呢,哎,声明变量咱们就使用let就对了。好,那么这个时间练习,我们就到这儿把它保存一下。
我来说两句