记一次局部变量操作

记一次小实验,打算根据所点击 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的奇葩之处

记一次局部变量操作

上一篇:C# json to dynamic object


下一篇:C# json字符串转DataTable