jQuery click variable scope issue

Question

I set up this fiddle with an issue I am encountering. I need the script to hide the button that was clicked after the animation is complete. What is the correct way to do this?

http://jsfiddle.net/digitalaxis/utJKU/

HTML:

<div>
    <a id='button1' href="#">Button 1</a>
    <a id='button2' href="#">Button 2</a>
    <a id='button3' href="#">Button 3</a>
    <a id='button4' href="#">Button 4</a>
    <a id='button5' href="#">Button 5</a>
</div>
<div id="box">
    Some element
</div>

JS:

$('a[id^="button"]').click(function() {    
    $('#box').hide('slow', function() {        
        $('a').hide('slow');
    });
});

I know you already have your solution, but you should provide the code sample directly in the post itself, so I have moved it over here. The idea is to think of the question as being self-contained if external resources like jsFiddle are ever unavailable. — Greg Pettit
– Greg Pettit, Commented Jul 10, 2012 at 21:02

Ricardo Binns · Accepted Answer · 2012-07-10 20:56:01Z

8

set a global variable where receive $(this), and use in the call back, like this:

$('a[id^="button"]').click(function() {
   var $this = $(this);
   $('#box').hide('slow', function() {
        $this.hide('slow');
   });
});

answered Jul 10, 2012 at 20:56

Ricardo Binns

3,2466 gold badges46 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

jQuery click variable scope issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related