Question

var buttons = document.querySelectorAll('button');
    var span = document.querySelectorAll('.counter');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (event) {
        span[i].innerText = parseInt(span[i].innerText) +1;
    });
}

内跨并不“看到”我用于按钮的相同[i]。控制台返回“未定义”有关如何解决该问题的任何建议？

Answer 1

这是因为您的click上的事件处理程序（button）将在稍后运行，而那时，i是其他内容。您应该使用闭包将其保持在内部：

var buttons = document.querySelectorAll('button'); 
var span = document.querySelectorAll('.counter');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (function (i) {
        return function (event) {
          span[i].innerText = parseInt(span[i].innerText || 0) + 1;
        };
    }(i)));
}

<button>A</button>
<span class="counter"></span>

<button>B</button>
<span class="counter"></span>

<button>C</button>
<span class="counter"></span>

在eventListener中创建全局变量，同样“for”

1 个答案: