Passa $ (questo) a una funzione

Question

Hey Guys, Sto provando a creare una playlist multimediale in grado di far avanzare i crediti, riprodurre il video e modificare il titolo su passaggio del mouse, la fine del video e il clic successivo/precedente . Quindi ho bisogno di scrivere alcune funzioni che possono essere chiamate insieme. Quindi:

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

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

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

Il problema è che $ (questo) non viene trasferito alle funzioni da .hover. Come faccio a fare questo?

Grazie per l'aiuto!

Answer 1

Il this porterà attraverso se lo farete:

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

---

EDIT: di affrontare la questione nel commento, questo funzionerà per qualsiasi funzione si assegna come un evento handler. Non importa se si tratta di una funzione anonima o di un nome.

questo:

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

... è lo stesso:

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

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

...o questo:

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

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

Answer 2

Per la risposta di @ patrickdw, jQuery imposta lo scopo di un callback per un evento all'elemento DOM su cui è stato generato l'evento. Ad esempio, consultare il parametro eventObject nella documentazione per il gestore click().

La mia risposta originale (sotto) è utile quando si desidera creare un plug-in jQuery in modo che si può richiamare i propri metodi personalizzati su oggetti jQuery e hanno l'oggetto jQuery impostato come this durante l'esecuzione. Tuttavia, è non la risposta corretta e semplice alla domanda originale.

// 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: O, se (come suggerito) che si desidera aggiungere un solo nome al metodo ~ globale jQuery namespace:

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

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

o più in generale:

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

Per ulteriori informazioni, vedere jQuery Plugin Authoring Guide.

Answer 3

è necessario modificare il codice per qualcosa di simile:

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

Aggiungi parametri per showBox e hideBox in modo che possano accettare l'elemento, e quindi chiamare showBox($(this)) e hideBox($(this)).

Answer 5

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

Answer 6

in JavaScript è possibile utilizzare call() o apply() per eseguire una funzione e specificare esplicitamente this per esso:

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

Il primo parametro dato alla call() Specifica l'oggetto che this farà riferimento a nella funzione. Eventuali ulteriori parametri vengono utilizzati come parametri nella chiamata di funzione.