CODEWITHSUNDEEP
javascriptjquery
Frederik Witte
Frederik Witte

Reputation: 1345

.on('click') in for loop to multiple elements?

I'm having trouble with my function. I need a for loop to attach a click event to my elements. Now it sadly only adds the click event to the last element.

I did it like this right now:

var $texte = $('.text-bg');

            $texte = $texte.children();
            for(i=0;i<$texte.length;i++){
            switch($($texte[i]).attr('class')){

                case 'text-top-left':
                console.log($texte[i]);
                    $($texte[i]).on('click', function(){
                        $($texte[i]).toggle(
                            function(){$($texte[i]).animate({'left':'0'})}, 
                            function(){$($texte[i]).animate({'left':'-100px'})}
                            );
                            });
                break;
            }
            }

But somehow the click event doesnt save. So when it goes into the second loop in the for function, the first click event is being overwritten. How to prevent this?

Upvotes: 2

Views: 171

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use this inside the event handler to refer to the current element

$($clicker[i]).on('click', function () {
    $(this).animate({
        'left': '0'
    });
});

Why is your solution not working

The given code can be changed as(there is no need to has a switch statement here)

var $texte = $('.text-bg');

$texte.children('.text-top-left').click(function () {
    var $this = $(this),
        flag = $this.data('animToggle');
    $this.data('animToggle', !flag);
    $this.animate({
        'left': flag ? '0' : '-100px'
    })
})

Demo: Fiddle

Upvotes: 4

fast
fast

Reputation: 885

You should be able to attach the handler to all jQuery result elements at once:

$clicker.on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

With your updated code, you should use the selection facilities already provided by jQuery:

$('.text-bg > .text-top-left').on('click', function() {
  $(this).toggle(
    function() {
     $(this).animate( {'left':'0'})}, 
      function() {
       $(this).animate({'left':'-100px'})
      });
    });
 });

To add a second case (for another class) just 'double' the code with the alternative behavior.

Upvotes: 1

Adassko
Adassko

Reputation: 5343

You can use

$($texte[i]).on('click', function(){
    $(this).animate({'left':'0'});
});

OR simply assign the loop variable to a local variable INSIDE the loop:

var j = i;
$($texte[j]).on('click', function(){
    $($texte[j]).animate({'left':'0'});
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to use this, In event handler it refers to element which executed the event.

Use

$($clicker[i]).on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

Your code can be simplified as However .toggle(function, function, ... ) removed in jQuery 1.9

$('.text-bg > .text-top-left').on('click', function() {
    var toggle = $(this).data('toggle');
    $(this).data('toggle', !toggle);
    $(this).animate({
        'left': toggle ? '-100px' : '0'
    });
});

Upvotes: 3

Related Questions