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 (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

感谢Janis

阅读Mozilla的页面我找到了解决方案。有必要使用“let”而不是“var”。我尝试了其他解决方案，但只使用“让”我解决了这个问题，即使没有创建功能。使用“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

1 个答案: