making click events with a loop jQuery

Question

i am trying to make a slideshow that counts the amount of images inside a div. and makes a clickable circle for each image.

this is the code that seems to fail:

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

A. Wolff · Accepted Answer · 2013-11-21 11:38:29Z

2

For example, using a closure:

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

In your case, you could use that:

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

answered Nov 21, 2013 at 11:38

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kristian Daugaard Over a year ago

Thx! no idea what is so different other than you using an extra function with a parameter?

Collectives™ on Stack Overflow

making click events with a loop jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related