记一次小实验,打算根据所点击 li 修改 body 背景图片
<ul> <li><img src="img/1.jpg" ></li> <li><img src="img/2.jpg" ></li> <li><img src="img/3.jpg" ></li> <li><img src="img/4.jpg" ></li> </ul> <script> var btns = document.querySelectorAll(‘li‘); var pic = document.querySelectorAll(‘img‘); for (var i = 0; i < btns.length; i++) { pic[i].onclick = function () { document.body.style.background = ‘url(‘ + this.src + ‘)‘; console.log(pic[i]); //局部变量,var 在 for内 } console.log(pic[i]); } </script>
一开始的时候,获取元素后要在事件内部继续获得内部值,发现要用this指定指向dom,不可用变量指定
pic[i].onclick = function () {
document.body.style.background = ‘url(‘ + this.src + ‘)‘; //可行
}
pic[i].onclick = function () {
document.body.style.background = ‘url(‘ + pic[i].src + ‘)‘; //打印后发现未定义pic[i]
}
原本以为是onclick后pic[i]的指向变了,然后打印了一下pic,发现pic是存在的
再在for里面打印pic[i]发现是正常的,然后我才意识到var是for内局部变量
谨记js的奇葩之处