Question

I have something like a beginner problem, because javascript uses the variable ‘i’ in an unexpected way:

for(var i=0; i<3;i++){
    $("a[href=#markers"+i+"]").click(function() {
        console.info(this);
        console.info("click: "+i);
    });
}

Here is my console:

<a href="#markers0">
click: 3
<a href="#markers1">
click: 3
<a href="#markers1">
click: 3

But I want this:

<a href="#markers0">
click: 0
<a href="#markers1">
click: 1
<a href="#markers1">
click: 2

Can someone help and resolve this problem?
Thanks!

Answer 1

The loop will continue to increase the i variable independent of whatever you click.

Why not just target all elements that has a href starting with #markers, and then get the number from the href, like so:

$('a[href^="#markers"]').on('click', function() {
     var i = $(this).attr('href').replace('#markers','');
     console.log("click: "+i);
});​

FIDDLE

Or if for some strange reason you need the loop, you can always just store the variable in data() :

for(var i=0; i<3;i++){
    $("a[href=#markers"+i+"]").data('i',i).click(function() {
        console.info(this);
        console.info("click: "+$(this).data('i'));
    });
}​

FIDDLE