JavaScript循环出现的问题——用闭包来解决

在for循环中，数组长度为3，我本来是想对每个循环的元素绑定一个点击事件的，结果点击后控制台输出全部为1。

 1 for (var i = 0; i < data.data.length; i++) {
 2     $('.lands').append(
 3         '">\
 4             
\
 5                 \
 6                 
\
 7                     \
 8                     
\
 9                         \
10                     
\
11                     
\
12                         \
13                     
\
14                 
\
15                 
'+ list[i].farmName + list[i].cropTypes + '
\
16                 ) class="gofarm-btn">去农场看看\
17             
\
18         '
19     );
20 
21     var className = '.land' + `${i % 3 + 1}`
22     console.log(className)
23     $(className).click(function(){
24         console.log(`${i % 3 + 1}`)
25     })    
26 }

 

我觉得这与闭包的知识有关，由于i是全局的作用域，相当于同一个引用，等循环执行完，最终的i的值为i%3+1=1，然后在点击的时候输出的便全部为1了。

解决方案：加一个立即执行函数，暂时保存i的值到函数里成为j，这样就形成了一个闭包，每个函数里的j各不相同，在内存中是不同的引用，从而解决了这个问题。

 

 1 for (var i = 0; i < data.data.length; i++) {
 2     $('.lands').append(
 3         '">\
 4             
\
 5                 \
 6                 
\
 7                     \
 8                     
\
 9                         \
10                     
\
11                     
\
12                         \
13                     
\
14                 
\
15                 
'+ list[i].farmName + list[i].cropTypes + '
\
16                 ) class="gofarm-btn">去农场看看\
17             
\
18         '
19     );
20 
21     (function(j){
22         var className = '.land' + `${j % 3 + 1}`
23         console.log(className)
24         $(className).click(function(){
25             console.log(`${j % 3 + 1}`)
26         })
27     })(i)        
28 }