Question

Currently tying to keep my code within an object, I would like to convert the contents of a click event into a method but not overly sure how this is done. The current code looks like this:

Current JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){

// Would like to move this code into its own method toggle_slides() ??

                $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
            });                 
        }

but I would like the code to look like this but I know I’m missing a few key things plus this obviously doesn’t mean the clicked event:

JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){
                toggle_slides(); //pass in this?
            });                 
        },
        toggle_slides: function(){ // add argument for this?
               $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
        }

Can anyone offer some advice on how to make this work?

Answer 1

The problem is the ever-context-dependent value of ‘this’.

First, a note about how the original code worked:

When init() is originally called, this refers to the parent object (gep). But within the click event handler, this refers to the clicked element. So that you can still access the parent within the click handler, you capture the ‘parent value of this’ into _this, so you can use it for later – and everything works fine.

But when you move the code in the handler into a separate method, quite a few things change:

• First, small, large and other variables are no longer in the local scope, so have to be either redefined or imported as parameters.

• this now refers to the parent element again, because the method now executing is not the event handler, but a method on the parent element. So references to _this in the old code can just use this in the new code.

• Finally, in the old code, in the event handler, this referred to the element that was clicked. But (see above) in the new method, this means something different: the ‘parent’ object. So we need a parameter to capture that clicked element – I’ve passed it as an el parameter, and references to this in the old code change accordingly.

So the real thing to watch for is: what object does this code belong to? If you move code belonging to one object to another – eg. from an event handler on one object to a method on another object – you’ll likely need to rework/rename any this or this-like variables as appropriate.

Annotated copy of the updated code follows, also available as a jsfiddle:

...
        // Click handlers
        slides_li.on('click', function(){
            // pass 'this' - the clicked element - as the el param; also small and large.
            gep.toggle_slides(this, small, large);
        });                 
    },

    toggle_slides: function(el, small, large){
           // '_this' in old code in handler replaced with 'this';
           // 'this' in handler code replaced with 'el' here
           $('.active', this.els.slides).not(el).animate({
                width: small
            }, 300).removeClass('active');
            // animate the clicked one

            // 'this' in handler code replaced with 'el'here
            if ( !$(el).hasClass('active') ){
                $(el).animate({
                    width: large
                }, 300).addClass('active');
            }                
    }