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)        
}