Przekaż $ (this) do funkcji

Question

Hey Guys, Próbuję utworzyć playlistę multimediów, która może przesuwać kredyty, odtwarzać wideo i zmieniać tytuł po kciuku, po zakończeniu filmu i po następnym/kliknięciu prev . Muszę więc napisać kilka funkcji, które można następnie nazwać razem. Więc tak:

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

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

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

Problem polega na tym, że $ (this) nie przenosi się do funkcji z .hover. Jak mam to zrobic?

Dzięki za pomoc!

Answer 1

this przeprowadzi poprzez jeśli po prostu zrobić:

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

---

EDIT: Aby odpowiedzieć na pytanie w komentarzu, to będzie pracować dla dowolnej funkcji przypisanej jako zdarzenie treser. Nie ma znaczenia, czy jest to funkcja anonimowa czy nazwana.

to:

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

... jest taki sam jak:

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

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

...albo to:

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

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

Answer 2

Odpowiedź per @ patrickdw, jQuery ustawia zakres wywołania zwrotnego zdarzenia na element DOM, w którym zostało wywołane zdarzenie. Na przykład zobacz parametr eventObject w dokumentacji dla programu obsługi click().

Mój oryginalny odpowiedzi (poniżej) jest przydatna, gdy chcemy utworzyć jQuery plug-in, dzięki czemu można wywołać własne niestandardowe metody na obiektach jQuery i jQuery mieć obiekt ustawiony jako this podczas wykonywania. Jednak jest to poprawna i prosta odpowiedź na oryginalne pytanie.

// 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: Albo, jeśli (jak sugerowano), który chcesz dodać tylko jedno nazwisko do ~ globalny jQuery metody nazw:

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

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

lub bardziej ogólnie:

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

Aby uzyskać więcej informacji, zobacz jQuery Plugin Authoring Guide.

Answer 3

trzeba zmodyfikować kod do czegoś takiego:

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

Dodaj parametry showBox i hideBox tak, że mogą przyjmować element, a następnie zadzwonić showBox($(this)) i hideBox($(this)).

Answer 5

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

Answer 6

W JavaScript można użyć call() lub apply() do wykonywania funkcji i wyraźnie określić this do niego:

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

Pierwszy parametr podany do call() określa obiekt, który this będzie odnosić się do w funkcji. Wszelkie dalsze parametry są używane jako parametry w wywołaniu funkcji.