Pass $ (this) для функции

Question

Hey Guys, Я пытаюсь создать медиа-плейлист, который может продвигать кредиты, воспроизводить видео и изменять заголовок на палец, конец видео и на следующий/предыдущий клик , Поэтому мне нужно написать некоторые функции, которые затем могут быть вызваны вместе. Так вот так:

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

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

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

Проблема в том, что $ (это) не выполняет функции из .hover. Как мне это сделать?

Спасибо за помощь!

Answer 1

this будет проводить, если вы просто сделать:

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

---

EDIT: Для решения вопроса в комментарии, это будет работать для любой функции вы назначаете как событие обработчик. Не имеет значения, является ли это анонимной функцией или именованной.

Это:

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

... так же, как:

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

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

...или это:

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

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

Answer 2

Ответ на ответ @ patrickdw jQuery задает область обратного вызова для события в элемент DOM, на котором было запущено событие. Например, см. Параметр eventObject в документации для обработчика click().

Мой первоначальный ответ (ниже) полезна, когда вы хотите создать JQuery плагин, так что вы можете ссылаться на свои собственные методы объектов JQuery и есть объект JQuery установлен как this во время выполнения. Однако, не правильный и простой ответ на исходный вопрос.

// 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() } 
); 

Редактировать: Или, если (как это было предложено) вы хотите добавить только одно имя для метода ~ глобального Jquery имен:

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

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

Или в более общем плане:

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

Для получения дополнительной информации см. jQuery Plugin Authoring Guide.

Answer 3

Вы должны изменить код, чтобы что-то вроде этого:

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); 
    } 
); 

Answer 4

Добавить параметры showBox и hideBox так, чтобы они могли принимать элемент, а затем вызвать showBox($(this)) и hideBox($(this)).

Answer 5

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

Answer 6

В JavaScript вы можете использовать call() или apply() для выполнения функции и явно указать this для него:

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

Первый параметр, задаваемый call() определяет объект, который this будет ссылаться в функции. Любые дополнительные параметры используются в качестве параметров в вызове функции.