A strange phenomena using JQ selector with some variable identifiers

Question

I want to add come mouseover and mouseout functions to a series classes. So I use JQ selectors with variables in a loop:

for(i=1;i<=2;i++){
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(cid).mouseover(function(){
    $(ccid).addClass("RelatedMainComment");
    $(csid).addClass("RelatedMainComment");
    });
    $(cid).mouseout(function(){
        $(ccid).removeClass("RelatedMainComment");
        $(csid).removeClass("RelatedMainComment");
    });
    }

But it doesn't run correctly, It seems to add the last one class, which in the example it is the class "Cid2", the mouseover ande mouseout function. So I take an another experiment:

i=1;
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(cid).mouseover(function(){
    $(ccid).addClass("RelatedMainComment");
    $(csid).addClass("RelatedMainComment");
    });
    $(cid).mouseout(function(){
        $(ccid).removeClass("RelatedMainComment");
        $(csid).removeClass("RelatedMainComment");
    });
    i=2;

it's result is same with the former one . besides,If the code is :

        for(i=2;i>=1;i--){
    cid='.Cid'+i;
    ccid='.CCid'+i;
    csid='.CSid'+i;     
    $(".Cid"+i).mouseover(function(){
    $(".CCid"+i).addClass("RelatedMainComment");
    $(".CSid"+i).addClass("RelatedMainComment");
    });
    $(".Cid"+i).mouseout(function(){
        $(".CCid"+i).removeClass("RelatedMainComment");
        $(".CSid"+i).removeClass("RelatedMainComment");
    });
    }

it can't work. Can you explain why?

Class lack of closures, duplicate of about 1 million other questions on Stack Overflow. — user229044, Oct 12 '13 at 12:52

score 3 · Answer 1 · answered Oct 12 '13 at 15:22

Javscript closures! Use an anonymous function with i as the param:

for(i=1;i<=2;i++){
    (function(i) {
        cid='.Cid'+i;
        ccid='.CCid'+i;
        csid='.CSid'+i;     
        $(cid).mouseover(function(){
            $(ccid).addClass("RelatedMainComment");
            $(csid).addClass("RelatedMainComment");
        });
        $(cid).mouseout(function(){
            $(ccid).removeClass("RelatedMainComment");
            $(csid).removeClass("RelatedMainComment");
        });
    })(i)
}

Archy Will He 何魏奇 · Answer 2 · 2013-10-12T15:34:02.287

1

The variable ccid is only used in the statement $(ccid).addClass("RelatedMainComment"); when you mouseover $(cid).

By that time the value of ccid is no longer '.CCid'+i but has already become '.CCid2' and therefore it doesn't work as you have expected.

For the variable ccid in your function to stay as '.CCid'+i, one solution is to use event.data.

edited Oct 12 '13 at 15:34

answered Oct 12 '13 at 15:24

Archy Will He 何魏奇

9,589
4
34
50

A strange phenomena using JQ selector with some variable identifiers

2 Answers2