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

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

 for (var i = 0; i < data.data.length; i++) {
     $('.lands').append(
         '<button type="button" class="land land' + `${i % 3 + 1}` + '">\
             <div class="soil">\
                 <!-- 成长中的树 -->\
                 <div class="tree-wrap">\
                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">\
                     <div class="land-bubble land-bubble__top watering">\
                         <img src="../../images/watering.png" alt="浇水">\
                     </div>\
                     <div class="gif gif-top watering-gif">\
                         <img src="../../images/gif/watering.gif" alt="浇水动画">\
                     </div>\
                 </div>\
                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>\
                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>\
             </div>\
         </button>'
     );

     var className = '.land' + `${i % 3 + 1}`
     console.log(className)
     $(className).click(function(){
         console.log(`${i % 3 + 1}`)
     })
 }

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

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

 for (var i = 0; i < data.data.length; i++) {
     $('.lands').append(
         '<button type="button" class="land land' + `${i % 3 + 1}` + '">\
             <div class="soil">\
                 <!-- 成长中的树 -->\
                 <div class="tree-wrap">\
                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">\
                     <div class="land-bubble land-bubble__top watering">\
                         <img src="../../images/watering.png" alt="浇水">\
                     </div>\
                     <div class="gif gif-top watering-gif">\
                         <img src="../../images/gif/watering.gif" alt="浇水动画">\
                     </div>\
                 </div>\
                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>\
                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>\
             </div>\
         </button>'
     );

     (function(j){
         var className = '.land' + `${j % 3 + 1}`
         console.log(className)
         $(className).click(function(){
             console.log(`${j % 3 + 1}`)
         })
     })(i)
 }