javascript - 点击事件和for循环

Question

HTML 代码:

<div class="test" id="inner1">
  ONE
</div>
<div class="test" id="inner2">
  TWO
</div>
<div class="test" id="inner3">
  THREE
</div>

<div class="test1" id="outer1">
  ONE
</div>
<div class="test1" id="outer2">
  TWO
</div>
<div class="test1" id="outer3">
  THREE
</div>

Javascript代码:

<script type="text/javascript">
  for (var i=1;i<=3;i++)
  {
     $("#inner"+i).click(function () {  
        $("#outer"+i).css("background-color","blue")
     });
  }  
</script>

和CSS:

.test{
    width: 100px;
    padding: 10px;
    background-color: green;
    margin-bottom:10px;
    cursor:pointer;
}

.test1{
    width: 100px;
    padding: 10px;
    background-color: red;
    margin-bottom:10px;
}           

我想要的是通过单击inner1更改outer1的背景颜色，通过单击inner2更改outer2的背景颜色，通过单击inner3更改outer3的背景颜色。上面的代码不起作用，因为它查找事件点击被触发时不存在的outer4(i=4)...您知道如何使用某种循环来实现上述代码吗？

谢谢

http://jsfiddle.net/Lpwmyspo/1/

Answer 1

当您像这样进行迭代时，直到您实际单击某些内容之前，才会计算 click 函数内的 i ，此时循环已完成，并且 i 的值code> 是循环中最后设置的内容。

真正的问题是，当您可以使用 attribute-starts-with 选择器和 this 代替时，为什么要使用循环

$('[id^="inner"]').on('click', function () {  
    $('#outer' + this.id.slice(-1)).css("background-color","blue");
});

FIDDLE