JavaScript - declaring multiple on click events in one for loop (Slider)

Question

I'm making a simple slider. It has a carousel navigation bar with small photos. Photo:

When you click on small image the big one schould change to the image of small one. I don't want to write separate events for each small photo. I would like to create them all in one for loop.

I tried so far:

function photo(nr) {
    var photoNr = '<img class="bigFoto" src="images/'+nr+'.jpg">'
    $('div.bigFotoContainer').html(photoNr);
}

function outIn() {
    $('div.bigFotoContainer').fadeOut(500);
    $('div.bigFotoContainer').fadeIn(500);
}

for(var i=1; i<18; i++) {
    $('.Photo'+i.toString()).click(function(){
        outIn();
        setTimeout('photo('+i+')',500);
    });
}

This solution doesn't give out any image. It makes an error:

"Failed to load resource: the server responded with a status of 404 (Not Found)"

I am thankful for the help.

Why the [magic number](https://en.wikipedia.org/wiki/Magic_number_(programming)) `18`? — Andreas, Feb 01 '17 at 17:45
See http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example?rq=1 — Gabriele Petrioli, Feb 01 '17 at 17:45
@Andreas Sorry, I schould have changed that. 18 because I have now 17 images in navigation bar. — Czapa, Feb 01 '17 at 17:50

score 1 · Answer 1 · answered Feb 01 '17 at 17:42

It's not a good procatice to attach event inside a loop when you could use common classes or also you could use the start with selector ^ :

$('[class^="Photo"]').click(function(){
    // Your code here
});

That will attach the click event to all the elements with the class that start with Photo.

Or you could use a separated function (for example click_event) :

for(var i=1; i<18; i++) {
    click_event(i);
}

function click_event(i){
    $('.Photo'+i.toString()).click(function(){
        outIn();
        setTimeout('photo('+i+')',500);
    });
}

Hope this helps.

JavaScript - declaring multiple on click events in one for loop (Slider)

1 Answers1