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