Передайте $ (this) в функцию

Question

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

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

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

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

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

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

Answer 1

В ответе @ 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 .

Answer 2

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

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

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

Answer 3

this пройдет, если вы просто сделаете:

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

---

РЕДАКТИРОВАТЬ: Для решения вопроса в комментарии, это будет работать для любой функции, которую вы назначаете в качестве обработчика событий. Не имеет значения, анонимная ли это функция или именованная.

Это:

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

... совпадает с:

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

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

... или это:

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

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

Answer 4

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

Answer 5

Вам нужно изменить свой код примерно так:

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 6

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