jQuery click function inside a loop. Can't affect numbers inside the function

Question

Got a problem here and i've been pulling my hair last few days...

I'm making a sort of language filter function for a website and it's a menu where you click a language and it filters out the rest of them. Since i got lots of different languages i figured it would be best to loop everything instead of making like 15 pieces of the same code.

Here's my code:

// >>> Language click effects
    for(langClickNum = 1; langClickNum < langList.length; langClickNum++) {

        $('#lang'+langList[langClickNum]).click(function() {
            if (!langSelect[langClickNum]) {

                clrSearch();
                clrLang();
                langHide();

                $('#lang'+langList[langClickNum]).addClass('langCheck');
                $('.itemLang'+langList[langClickNum]).show();
                langSelect[langClickNum] = true;
            }
            else {
                clrLang();
                langShow();
            }
        });

    }

As you can see inside the click function I want to pick indexes from different arrays using the loop counters number. But since the script inside the click function dosent run unless I click it, it won't catch the correct array number. Instead it picks the last array number for each language i click. I'm very aware of what problem is but I have no idea how to solve it. Please help me out there!

If I give it numbers not looping it it works just fine, like this:

$('#lang'+langList[1]).click(function() {
        if (!langSelect[1]) {

            clrSearch();
            clrLang();
            langHide();

            $('#lang'+langList[1]).addClass('langCheck');
            $('.itemLang'+langList[1]).show();
            langSelect[1] = true;
        }
        else {
            clrLang();
            langShow();
        }
});

I hope you can see my problem.

you could consider using JSfiddle to demo this type of problem — sbr
– sbr, Commented Sep 30, 2012 at 18:49

Sidharth Mudgal · Accepted Answer · 2012-09-30 19:00:00Z

1

I had faced a similar problem few months back. You go about doing like this:

$('#lang'+langList[langClickNum]).click(function(langClickNum) {
    return function() {
        if (!langSelect[langClickNum]) {

            clrSearch();
            clrLang();
            langHide();

            $('#lang'+langList[langClickNum]).addClass('langCheck');
            $('.itemLang'+langList[langClickNum]).show();
            langSelect[langClickNum] = true;
        }
        else {
            clrLang();
            langShow();
        }
    }
});

The reason is that all the click handler functions share the same closure environment and hence the variable langClickNum will be the same for all of them. If you need langClickNum to be different for each of them, you need to make pass it to the function which will essentially create a copy of langClickNum for that function's closure. Not sure if I explained it perfectly...

edited Sep 30, 2012 at 19:00

answered Sep 30, 2012 at 18:47

Sidharth Mudgal

4,26422 silver badges25 bronze badges

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

2 Comments

pthorsson Over a year ago

I added the return function() but that didn't work either. Now i get no response at all from the click function.

Sidharth Mudgal Over a year ago

Have tried putting a breakpoint inside the function in Firebug and checking the value of langClickNum?

sbr · Accepted Answer · 2012-09-30 19:05:35Z

0

The problem is related to the concept of JS variable scoping/closure.

The value of langClickNum iterates ok when you are binding the 'click' handler, but when the click handler is executed, the 'langClickNum' is already equal to langList.length.

you could do something like:

for(x = 1; x < langList.length; x++) {      
    (function(){
        var langClickNum = x;   
        $('#lang'+langList[langClickNum]).click(function() {//... rest of your code}
    })();
}

Here, the value of langClickNum will be as you expected, because of the function scoping in JS.

see for more information: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

answered Sep 30, 2012 at 19:05

sbr

4,8455 gold badges46 silver badges51 bronze badges

1 Comment

pthorsson Over a year ago

This worked fine! Thanks for the example and the explanation!

Lawrence Johnson · Accepted Answer · 2012-09-30 19:18:38Z

Rather than using a for loop, simply iterate through the lang objects in the DOM using a counter.

<script type="text/javascript">
    jQuery(document).ready(function () {
        var _LangList = ['lang1', 'lang2', 'lang3', 'lang4', 'lang5'];
        var _iCurrLangIndex = 0;
        var _iIndex = 0;
        jQuery.each(jQuery('#lang_list').children(), function () {
            var _oCurrLangObj = jQuery(this).click(function () {
                var __iThisItemsIndex = parseInt(jQuery(this).attr('data-lang-index'));
                // Code Here
            }).attr('data-lang-index', _iIndex++);
        });
    });
</script>

<div id="lang_list">
    <div id="lang0"></div>
    <div id="lang1"></div>
    <div id="lang2"></div>
    <div id="lang3"></div>
    <div id="lang4"></div>
</div>

Also for selecting a value, I would simply use 1 global Index var (_iCurrLangIndex) for managing which is used and make it 0-based if possible.

Collectives™ on Stack Overflow

jQuery click function inside a loop. Can't affect numbers inside the function

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related