Implementing Javascript variables into jQuery Method

Question

I am trying to implement a for loop into my Javascript/jQuery code, which I know works since I did the testing before I implemented the for loop. I found the for loop syntax off of this website: http://www.w3schools.com/js/js_loop_for.asp I am not sure how to implement my variable "i" into my for loop within the .css jQuery method. What am I doing wrong? Here is my code:

for(var i=0;i<36;i++) {
    $(".quote_" + i).mouseenter(function(){
        $("td.quote_" + i).css("background-color", "rgb(238, 238, 238)");
    });
    $(".quote_" + i).mouseleave(function(){
        $("td.quote_" + i).css("background-color", "white");
    });
}

This is the code which I know works:

$(".quote_1").mouseenter(function(){
        $("td.quote1").css("background-color", "rgb(238, 238, 238)");
    });
    $(".quote_1").mouseleave(function(){
        $("td.quote_1").css("background-color", "white");
    });

Just so you know I **did** include a jQuery library, so yes, jQuery runs. — Tigerman55, Nov 20 '13 at 17:00
wrong approach, no need to for loop it, with a class of quote, jquery will do the loop for you as long as you bind the mouse event on quote. Or you can just use css for the hover effect — Huangism, Nov 20 '13 at 17:04

score 4 · Answer 1 · answered Nov 20 '13 at 17:02

4

This is all wrong.

Use one CSS class instead of numbering them. Then use CSS. No JavaScript required.

.quote {
    background-color: white;
}
.quote:hover {
    background-color: rgb(238, 238, 238);
}

answered Nov 20 '13 at 17:02

Tomalak

332,285
67
532
628

Good job making me think of CSS. It turns out, the main reason my code wasn't working was because I had conflicting CSS in my Stylesheet. – Tigerman55 Nov 20 '13 at 18:31
Whilst you *can* do this in JavaScript, it will perform rather poorly, especially with many elements. I strongly recommend doing style changes in response to mouse move events via CSS only. – Tomalak Nov 20 '13 at 18:36

score 3 · Accepted Answer · answered Nov 20 '13 at 17:00

This is a classic problem of using a closure variable in a loop

for(var i=0;i<36;i++) {
    $(".quote_" + i).mouseenter(function(){
        $(this).css("background-color", "rgb(238, 238, 238)");
    }).mouseleave(function(){
        $(this).css("background-color", "white");
    });
}

Instead of creating a loop like this, I would recommend adding an additional class called quote or something like that to each of these elements so that the elements class attribute will look like class="quote quote_1" then

    $(".quote").mouseenter(function(){
        $(this).css("background-color", "rgb(238, 238, 238)");
    }).mouseleave(function(){
        $(this).css("background-color", "white");
    });

Thanks for the information. I used your second example, which worked perfectly! — Tigerman55, Nov 20 '13 at 18:30

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

I see this question come up a lot. It has to do with how the value of i is bound, or more specifically how it's not.

Google for "js closures loop" and you'll find answers covering this.

http://www.mennovanslooten.nl/blog/post/62

JavaScript closure inside loops – simple practical example

edited May 23 '17 at 11:50

Community

1
1

answered Nov 20 '13 at 17:00

Halcyon

57,230
10
89
128

Implementing Javascript variables into jQuery Method

3 Answers3