使用 $.fancybox.open 的 for 循环中的 fancybox 3

Question

我想将所有这些 fancybox 调用放在一个循环中

    var colors = [[
        {src  : 'http://example.net/red.jpg'},
        {src  : 'http://example.net/yellow.jpg'},
    ], [
        {src  : 'http://example.net/green.jpg',},
        {src  : 'http://example.net/black.jpg',},
    ]
];

$('.image-1').on('click', function() {
    $.fancybox.open(colors[0], {
        loop : true,
        protect: true,
        slideShow : {
            autoStart : true,
            speed     : 5000
        }
    });

    return false;
});

$('.image-2').on('click', function() {
    $.fancybox.open(colors[1], {
        loop : true,
        protect: true,
        slideShow : {
            autoStart : true,
            speed     : 5000
        }
    });

    return false;
});

在这种模式下它运行良好，但我想要像这样的带有 for 循环的解决方案

for (var i = 0; i < 2; i++) {
    $('.image-'+(i+1).on('click', function() {
        $.fancybox.open(colors[i], {
            loop : true,
            protect: true,
            slideShow : {
                autoStart : true,
                speed     : 5000
            }
        });

        return false;
    });
}

此解决方案不起作用，只有当我设置颜色[0] 或颜色[1]

你能帮我解决这个问题吗？

谢谢

Answer 1

您应该了解 JavaScript 最重要的概念之一 - 闭包。有很多关于此的教程，例如 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures or https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8

对于您的情况，我会向您的链接添加一些属性（例如，data-index）并在点击方法中使用它来检索相应的数据。

Answer 2

谢谢贾尼斯

阅读 Mozilla 的页面我找到了解决方案。有必要使用 "let" 而不是 "var"。我尝试了其他解决方案，但仅使用 "let" 即使没有创建函数我也解决了这个问题。使用 "data" 属性

加载数组数据是个好主意

for (var i = 0; i < colors.length; i++) {
    let item = colors[i];

    $('.image-'+(i + 1)).on('click', function() {
        $.fancybox.open(
            item,
            {
                loop : true,
                protect: true,
                slideShow : {
                    autoStart : true,
                    speed     : 5000
                }
            }
        );

        return false;
    });
}

再见

使用 $.fancybox.open 的 for 循环中的 fancybox 3

fancybox 3 in a for loop using $.fancybox.open

javascript

for-loop

fancybox