Iterate through array and bind events

Question

I've checked through the forum and cant seem to find a solution to my problem.

I have an array of id's and I'm iterating through them with a for loop adding mouse events for enter and leave. However the events all bind to the final ID, which is probably a for each issue.

I've put it up on a fiddle below, any help would be appreciated - my brain is a bit frazzled today.

http://jsfiddle.net/shanemccster/e48vu/4/

cards = new Array('#box0','#box1','#box2');
function bindCardEvents(){
    for (var i=0; i<cards.length; i++){
        var targetID = '#'+$(cards[i]).attr('id');
        $(targetID)
            .mouseenter(function() {
                TweenMax.to(targetID,0.3, {opacity:0.5} )
            }).mouseleave(function() {
                TweenMax.to(targetID,0.3, {opacity:1}) 
            }); 
    }
}
bindCardEvents();

Thanks

I recommend to add some class selector for all this(like a .card), or use [id^=box] selector — vp_arth
– vp_arth, Commented Apr 1, 2014 at 17:16
Your fault is incorrect events understanding(or js closures) When events triggered targetID already overriden by next loop iterations... — vp_arth
– vp_arth, Commented Apr 1, 2014 at 18:00

Anoop Joshi P · Accepted Answer · 2014-04-01 17:15:23Z

1

You dont have to iterate. You can use like

   $("[id^=box]")
        .mouseenter(function() {
            TweenMax.to(this,0.3, {opacity:0.5} )
        }).mouseleave(function() {
            TweenMax.to(this,0.3, {opacity:1}) 
        });

It will bind the events to all the elements whose id starts with box

Demo

answered Apr 1, 2014 at 17:15

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

3 Comments

Smeegs Over a year ago

FYI: you now have an undefined targetID

Smeegs Over a year ago

@vp_arth, I know, I was letting the author know so he can update his answer.

Shane McCarthy Over a year ago

Such a simple thing, I love when I learn something new. Thank you!

Travis J · Accepted Answer · 2014-04-01 21:20:46Z

0

jsFiddle Demo

You can just join the ids together with , which by convention adds the selectors to a set in jQuery. After doing that, you can assign the event to the set returned by those selectors. Each event will have access to the current element this. TweenMax.to expects a selector or an element, so you can pass this into the function without manually constructing an id selector.

var cards = new Array('#box0','#box1','#box2');
var cardSelector = cards.join(",");
function bindCardEvents(){
  $(cardSelector).mouseenter(function() {
    TweenMax.to(this,0.3, {opacity:0.5} )
  }).mouseleave(function() {
    TweenMax.to(this,0.3, {opacity:1}) 
  });
}
bindCardEvents();

For brevity this will also work

$(cards.join(",")).mouseenter(function() {
    TweenMax.to(this,0.3, {opacity:0.5} )
  }).mouseleave(function() {
    TweenMax.to(this,0.3, {opacity:1}) 
});

edited Apr 1, 2014 at 21:20

answered Apr 1, 2014 at 17:25

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

2 Comments

Travis J Over a year ago

@ShaneMcCarthy - It is definitely less efficient to check if every element on the page has an id which starts with box. If you want to save time, just use $(cards.join(',')).mouseenter ... which trades 3 characters for a far higher efficient selection.

Shane McCarthy Over a year ago

Ah yes, I didn't think of that. Good point, looks like I'll be sticking with your example. Thanks for your help Travis.

Collectives™ on Stack Overflow

Iterate through array and bind events

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related