How to queue jquery commands

Question

With this code:

<body>
    <div id="a1" style="width:200px; height:100px; background-color:black; margin:10px;"></div>
    <div id="a2" style="width:200px; height:100px; background-color:black; margin:10px;"></div>

    <script>
        i = 1;
        $("#a" + i).hover(function(){
            $("#a" + i).css("background-color", "grey");
        }, function(){
            $("#a" + i).css("background-color", "black");
        });

        i = 2;
        $("#a" + i).hover(function(){
            $("#a" + i).css("background-color", "grey");
        }, function(){
            $("#a" + i).css("background-color", "black");
        });
    </script>
</body>

I cannot receive the hover effect for each element, when I over mouse on the first, the second element changed. I think jquery not same as javascript about the sequence of commands, may be the hover for the first still not run yet. I can use queue function to order the command?

Please format your code correctly. It will make it much easier for you, and others, to understand. — Rory McCrossan
– Rory McCrossan, Commented Aug 5, 2014 at 6:55

Rory McCrossan · Accepted Answer · 2014-08-05 06:58:46Z

2

The issue is because the handlers are assigned on load, and executed well after that point when the mouseenter event fires. Because of that, i will always be 2.

A better method is to attach the same handler to both elements, and use the this keyword in the handler to relate the logic to the element which raised the event. Try this:

<div id="a1" class="foo"></div>
<div id="a2" class="foo"></div>

<script type="text/javascript">
    $('.foo').hover(function() {
        $(this).css("background-color", "grey");
    },
    function() {
        $(this).css("background-color", "black");
    });
</script>

Example fiddle

Note that by using classes on your elements, you can place the styling information in to a CSS stylesheet for a better separation of concerns.

answered Aug 5, 2014 at 6:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Mritunjay · Accepted Answer · 2014-08-05 07:12:23Z

0

At the time function will be executed the value of i will be 2, So using this instead of selectors will help you

i = 1;
$("#a" + i).hover(function () {
    $(this).css("background-color", "grey");
}, function () {
    $(this).css("background-color", "black");
});

i = 2;
$("#a" + i).hover(function () {
    $(this).css("background-color", "grey");
}, function () {
    $(this).css("background-color", "black");
});

And I think you are repeating code you can write like bellow.

for(var i=1;i<=2;i++){
    $("#a" + i).hover(function(){
            $(this).css("background-color", "grey");
        }, function(){
            $(this).css("background-color", "black");
        });
}

edited Aug 5, 2014 at 7:12

answered Aug 5, 2014 at 6:58

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

1 Comment

jdphenix Over a year ago

The functions close around i, which cause it's value to be 2 by the time they get invoked.

Collectives™ on Stack Overflow

How to queue jquery commands

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related