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

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

1 for (var i = 0; i < data.data.length; i++) {
 2     $('.lands').append(
 3         '<button type="button" class="land land' + `${i % 3 + 1}` + '">\
 4             <div class="soil">\
 5                 <!-- 成长中的树 -->\
 6                 <div class="tree-wrap">\
 7                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">\
 8                     <div class="land-bubble land-bubble__top watering">\
 9                         <img src="../../images/watering.png" alt="浇水">\
10                     </div>\
11                     <div class="gif gif-top watering-gif">\
12                         <img src="../../images/gif/watering.gif" alt="浇水动画">\
13                     </div>\
14                 </div>\
15                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>\
16                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>\
17             </div>\
18         </button>'
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         '<button type="button" class="land land' + `${i % 3 + 1}` + '">\
 4             <div class="soil">\
 5                 <!-- 成长中的树 -->\
 6                 <div class="tree-wrap">\
 7                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">\
 8                     <div class="land-bubble land-bubble__top watering">\
 9                         <img src="../../images/watering.png" alt="浇水">\
10                     </div>\
11                     <div class="gif gif-top watering-gif">\
12                         <img src="../../images/gif/watering.gif" alt="浇水动画">\
13                     </div>\
14                 </div>\
15                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>\
16                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>\
17             </div>\
18         </button>'
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 }