欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js在for中的事件无法调用循环变量i的解决方法

程序员文章站 2022-03-27 17:11:20
...

在for循环中的事件里面会发现无法使用循环变量i。

<div>
        <span>1</span>
    </div>
    <div>
        <span>2</span>
    </div>
    <div>
        <span>3</span>
    </div>
    <div>
        <span>4</span>
    </div>
    <div>
        <span>5</span>
    </div>
for (var i = 0; i < div.length; i++) {
            div[i].addEventListener('click', function () {
                var html = span[i].innerHTML;
                console.log(html);
            })
        }

js在for中的事件无法调用循环变量i的解决方法

这时,我们可以给事件的对象div用setAttribute设置一个自定义值,然后在事件中用getAttribute进行调用来取代i。

for (var i = 0; i < div.length; i++) {
            div[i].setAttribute('index', i);
            div[i].addEventListener('click', function () {
                var index = this.getAttribute('index');
                var html = span[index].innerHTML;
                console.log(html);
            })

js在for中的事件无法调用循环变量i的解决方法