JQuery的click事件如何與其中的全局變量一起工作？

for (var i = 0; i < 8; i++) { 
    $("#image" + i).click(function() { 
     console.log("test: " + i); 
    }); 
}

我等待測試：0，測試：1，測試：2 ...在這裏的控制檯，當我點擊我的圖片，但只有有：「測試：8」消息。它爲什麼這樣工作？如何保存i變量的當前值？我需要做的是這樣的：JQuery的click事件如何與其中的全局變量一起工作？

for (var i = 0; i < 8; i++) { 
    $("#image" + i).click(function() { 
     $("#anotherImage" + i).css("opacity", "0.5"); 
    }); 
}

我有8個anotherImages用的ID：anotherImage0，anotherImage1，...，anotherImage7 :)

來源

2016-12-05 JavaRunner

這是因爲i並不僅僅作用域你的循環塊，但是全局範圍或其父功能。一旦你的循環完成，它的價值就是它增加的次數的總和。爲了加強你的目標實現了塊作用域，你可以使用ES6的let變量賦值：

for (let i = 0; i < 8; i++) { 
 
    $("#image" + i).click(function() { 
 
    console.log("test: " + i); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image2" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image3" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image4" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image5" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image6" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image7" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image8" src="http://placehold.it/350x150" width="350" height="150" />

或者你可以在你的循環創建IIFE，這將執行塊作用域但伊莫let是更清潔：

for (var i = 0; i < 8; i++) { 
 
    (function(index) { 
 
    $("#image" + index).click(function() { 
 
     console.log("test: " + index); 
 
    }); 
 
    })(i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image2" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image3" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image4" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image5" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image6" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image7" src="http://placehold.it/350x150" width="350" height="150" /> 
 
<img id="image8" src="http://placehold.it/350x150" width="350" height="150" />

在JS個

來源

2016-12-05 04:14:11

好的答案！但**「反而升起並且具有全局範圍。」**只要我們沒有看到完整的代碼，我們不能確定變量的範圍。我們只能知道功能共享相同的範圍。在這種情況下，變量提升如何相關？ – bugwheels94

啊，很好的接收！修改我的解釋以反映這一點。好看。 –

功能記住他們的環境，這就是爲什麼在JS的所有功能都是關閉

for (var i = 0; i < 8; i++) { 
    (function(index){ //now index variable will be correct as they are passed to each function instead of sharing same i 
     $("#image" + index).click(function() { 
      console.log("test: " + index); 
     }); 
    })(i); 
}

PS：如果有與ES6使用沒有問題，那麼也請嘗試其他的答案與使用讓建議

來源

2016-12-05 04:14:23 bugwheels94

JQuery的click事件如何與其中的全局變量一起工作？

回答

相關問題