bind muiltiple elements to event handler using for loop in javascript

Question

I found a way to bind single elements in an array with a for loop to event handlers in jQuery.

This guide was useful to push me in that direction:
http://www.foliotek.com/devblog/keep-variable-state-between-event-binding-and-execution/

Now I am one level deeper and I am trying to bind muiltiple elements with the same prefix in an array to event handlers in jQuery.

Here's what works:

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    $(function() {
        for(var i in menu)
        {
            (function() {
                var x = menu[i];
                var y = menu[i]+'_menu';
                 $(x).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
                 $(y).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
            })();
        }
    }); 
});

Here's what I really want:

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    $(function() {
        for(var i in menu)
        {
            (function() {
                var x = menu[i];
                var y = menu[i]+'_menu';
                 $(x,y).hover(
                     function () {
                        $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                        $(y).show();
                     },
                     function () {
                        $(x).css({ backgroundColor: "#333", color: "#FFF"});
                        $(y).hide();
                     }
                );
            })();
        }
    }); 
});

UPDATE ::: Here is the final working implimentation:

var menu=new Array("#power","#services","#cashback","#schedule");

$(document).ready(function(){
    for(var i in menu)
    {
        (function(x, y) {
             $(x+','+y).hover(
                 function () {
                    $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                    $(y).show();
                 },
                 function () {
                    $(x).css({ backgroundColor: "#333", color: "#FFF"});
                    $(y).hide();
                 }
            );
        })(menu[i], (menu[i] + '_menu'));
    }
});

$(menu.join(', ')) to listen for an event on the primary elements, and then grab the secondary element by parsing out the ID of the first element. — c.hill
– c.hill, Commented Sep 27, 2012 at 1:22
Please do not update the question's code based on the answers. — Ram
– Ram, Commented Sep 27, 2012 at 1:35

yasaricli · Accepted Answer · 2012-09-27 01:28:01Z

3

alternative variable x and y set function arguments run the @param

(function(x, y) {

             $(x+','+y).hover(
                 function () {
                    $(x).css({ backgroundColor: "#000", color: "#3ABCEF"});
                    $(y).show();
                 },
                 function () {
                    $(x).css({ backgroundColor: "#333", color: "#FFF"});
                    $(y).hide();
                 }
            );
})(menu[i], (menu[i] + '_menu'));

answered Sep 27, 2012 at 1:28

yasaricli

2,53322 silver badges31 bronze badges

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

Comments

mgibsonbr · Accepted Answer · 2012-09-27 01:21:17Z

1

Don't call $ with two arguments, join them in a string:

$(x + "," + y).hover(

This way you'll get the selector you want: "#power,#power_menu" etc. Calling $ with two arguments would only use the first as a selector, treating the second as a context to select from.

answered Sep 27, 2012 at 1:21

mgibsonbr

22.1k7 gold badges74 silver badges115 bronze badges

2 Comments

Dan Kanze Over a year ago

lol man o man. it was simple as that. i thought it might have to do with the var already being allocated. thankyou!

mgibsonbr Over a year ago

@DanKanze Just one more thing: calling $(document).ready(fn) and $(fn) have the same effect. There's no need to do both.

c.hill · Accepted Answer · 2012-09-27 01:30:02Z

1

$(menu.join(', ')).hover();

Then inside the anonymous functions called by hover:

var _this = $(e.target);
var id = _this.attr('id');
var secondary_elm = $('#' + id + '_menu');
secondary_elm.show();

End result something like this:

             $(menu.join(', ')).hover(
                 function (e) {
                    var _this = $(e.target);
                    var id = _this.attr('id');
                    var secondary_elm = $('#' + id + '_menu');
                    secondary_elm.show();
                 },
                 function (e) {
                    var _this = $(e.target);
                    var id = _this.attr('id');
                    var secondary_elm = $('#' + id + '_menu');
                    secondary_elm.show();
                 }
            );

This leaves out the secondary element for being hovered on. Without understanding the HTML structure, I would imagine this is something you'd want to re-examine. Working with the .hover() event is a pain to begin with. When you start listening to multiple different elements to do the same thing essentially, you're asking for a whole heck of a lot of confusion.

edited Sep 27, 2012 at 1:30

answered Sep 27, 2012 at 1:24

c.hill

3,23327 silver badges31 bronze badges

2 Comments

Dan Kanze Over a year ago

the hover() is actually needs to bind on html elements independent of each other. thats why this seems rediculous. however, the layout is using several responsive design implimentations thus the need for the additional complexity.

Dan Kanze Over a year ago

also, joining the array will not work in my case becuase the "_menu" is independent of menu[i]. i chose to do it this way becuase not every menu[i] has a "_menu". sorry i should have mentioned that.

Joe Coder · Accepted Answer · 2012-09-27 01:30:20Z

0

jQuery(function($) {

    // put this in your loop body:

    var $x = $('#x');
    var $y = $('#' + $x.attr('id') + '_menu');

    function mouseIn(event) {
        var $this = $(event.target);    // x or y
        $x.css({ backgroundColor: "#000", color: "#3ABCEF"});
        $y.show();
    }

    function mouseOut(event) {
        var $this = $(event.target);    // x or y
        $x.css({ backgroundColor: "#333", color: "#FFF"});
        $y.hide();
    }

    $x.add($y).hover(mouseIn, mouseOut);
});

answered Sep 27, 2012 at 1:30

Joe Coder

4,56534 silver badges45 bronze badges

Collectives™ on Stack Overflow

bind muiltiple elements to event handler using for loop in javascript

Here's what works:

Here's what I really want:

UPDATE ::: Here is the final working implimentation:

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here's what works:

Here's what I really want:

UPDATE ::: Here is the final working implimentation:

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related