使用循环jQuery创建单击事件

Question

我正在尝试制作幻灯片，计算div内的图像数量。并为每个图像创建一个可点击的圆圈。

这是似乎失败的代码：

l = heroimgs.length;
for(var i=0; i<l; i++){
    $('#heronavpoint'+i).click(function(){
        $('.heroimg:visible').fadeOut(800);
        $('.heroimg:eq('+i+')').stop().delay(800).fadeIn();
    });
}

Answer 1

例如，使用闭包：

for (var i = 0; i < l; i++) {
    (function (i) {
        $('#heronavpoint' + i).click(function () {
            $('.heroimg:visible').fadeOut(800);
            $('.heroimg:eq(' + i + ')').stop().delay(800).fadeIn();
        });
    }(i));
}

在您的情况下，您可以使用：

$('[id^=heronavpoint]').click(function () {
    $('.heroimg:visible').fadeOut(800);
    $('.heroimg:eq(' + $(this).index() + ')').stop().delay(800).fadeIn();
});