CODEWITHSUNDEEP
javascriptjqueryfunctionthis
Drew Baker
Drew Baker

Reputation: 14430

Pass $(this) to a function

I am trying to build a media playlist that can advance the credits, play the video and change the title on thumb-hover, end of video and on next/prev click. So I need to write some functions that can then be called together. So like this:

    function showBox()
    {
        $(this).parents('.container').find('.box').show();
    };
    
    function hideBox()
    {
        $(this).parents('.container').find('.box').hide();
    };
    
    $('a').hover(
        function()
        {
            showBox();
        },
        function()
        {
            hideBox();
        }
    );

The problem is that $(this) does not carry through to the functions from the .hover. How do I do this?

Upvotes: 7

Views: 901

Answers (6)

sth
sth

Reputation: 229603

In Javascript you can use call() or apply() to execute a function and explicitly specify this for it:

$('a').hover(
    function()
    {
        showBox.call(this);
    },
    function()
    {
        hideBox.call(this);
    }
);

The first parameter given to call() specifies the object that this will refer to in the function. Any further parameters are used as parameters in the function call.

Upvotes: 3

Phrogz
Phrogz

Reputation: 303244

Per @patrickdw's answer, jQuery sets the scope of a callback for an event to the DOM element upon which the event was fired. For example, see the eventObject parameter in the documentation for the click() handler.

My original answer (below) is useful when you want to create a jQuery plug-in so that you may invoke your own custom methods on jQuery objects and have the jQuery object set as this during execution. However, it is not the correct and simple answer to the original question.

// Within a plug-in, `this` is already a jQuery object, not DOM reference
$.fn.showBox = function(){ this.parents('.container').find('.box').show(); };
$.fn.hideBox = function(){ this.parents('.container').find('.box').hide(); };
$('a').hover(
  function(){ $(this).showBox() },
  function(){ $(this).hideBox() }
);

Edit: Or, if (as suggested) you want to add only one name to the ~global jQuery method namespace:

$.fn.myBox = function(cmd){
  this.closest('.container').find('.box')[cmd]();
};

$('a').hover(
  function(){ $(this).myBox('show') },
  function(){ $(this).myBox('hide') }
);

Or more generally:

$.fn.myBox = function(cmd){
  switch(cmd){
    case 'foo':
      ...
    break;
    case 'bar':
      ...
    break;
  }
  return this;
};

For more information, see the jQuery Plugin Authoring Guide.

Upvotes: 7

user113716
user113716

Reputation: 322492

The this will carry through if you just do:

$('a').hover(showBox,hideBox);

EDIT: To address the question in the comment, this will work for any function you assign as an event handler. Doesn't matter if it is an anonymous function or a named one.

This:

$('a').click(function() { 
    alert( this.tagName ); 
});

...is the same as:

function alertMe() {
    alert( this.tagName );
}

$('a').click( alertMe );

...or this:

function alertMe() {
    alert( this.tagName );
}

$('a').bind('click', alertMe );

Upvotes: 3

Šime Vidas
Šime Vidas

Reputation: 185933

$('a').hover(function() {
    $(this).closest('.container').find('.box').show();
}, function()  {
    $(this).closest('.container').find('.box').hide();
});

Upvotes: 2

theIV
theIV

Reputation: 25774

Add parameters to showBox and hideBox so that they can accept the element, and then call showBox($(this)) and hideBox($(this)).

Upvotes: 1

g.d.d.c
g.d.d.c

Reputation: 47988

You need to modify your code to something like this:

function showBox(elem)
{
    elem.parents('.container').find('.box').show();
};

function hideBox(elem)
{
    elem.parents('.container').find('.box').hide();
};

$('a').hover(
    function()
    {
        var $this = $(this);

        showBox($this);
    },
    function()
    {
        var $this = $(this);

        hideBox($this);
    }
);

Upvotes: 2

Related Questions