Question

为什么变量i不在最后一行？或者更确切地说，它在迭代+1中取i的最后一个值（实际上是有意义的）。我想要的是与li_hotel [i]在注册活动时所需的价值相同。

for (var i = 0; i < li_hotel.length; i++) {
    li_hotel[i].addEventListener('click', function(event) {
        document.querySelector('#content > .left').innerHTML = this.innerHTML;
        document.querySelector('#content > .right').innerHTML = i;
    })
};

谢谢。

Answer 1

因为到达代码的时候，循环就完成了。你需要一个闭包：

for (var i = 0; i < li_hotel.length; i++) {
    (function(i) {
        li_hotel[i].addEventListener('click', function(event) {
            document.querySelector('#content > .left').innerHTML = this.innerHTML;
            document.querySelector('#content > .right').innerHTML = i;
        })
    })(i)
};

Answer 2

这是另一种方法，可能有点不寻常：你可以从Function()构造函数构建函数，它允许你将i连接到正文字符串。

警告：Stack Overflow的语法突出显示无法完成任务。

var li_hotel = document.querySelectorAll('#hotel>li');
for (var i = 0; i < li_hotel.length; i++) {
    var body = '\
        document.querySelector(\'#content > .left\').innerHTML = this.innerHTML;\
        document.querySelector(\'#content > .right\').innerHTML = '+i+';\
    ';
    li_hotel[i].addEventListener('click', new Function('event',body) );
};

<ul id="hotel">
    <li>hotel1</li>
    <li>hotel2</li>
    <li>hotel3</li>
</ul>

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

这可以避免闭包的开销。

js - 变量取一定值

2 个答案: