Pasar $ (esto) a una función

Question

Hey Guys, Estoy tratando de crear una lista de medios que pueda avanzar los créditos, reproducir el video y cambiar el título con el control deslizante, final de video y el siguiente/prev clic . Entonces necesito escribir algunas funciones que luego se pueden llamar juntas. Así como esto:

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

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

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

El problema es que $ (esto) no lleva a través de las funciones de la .hover. ¿Cómo hago esto?

¡Gracias por la ayuda!

Answer 1

El this llevará a través de si sólo hacemos:

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

---

EDIT: Para abordar la cuestión en el comentario, esto funcionará para cualquier función que asigne como un evento entrenador de animales. No importa si es una función anónima o una nombrada.

Este:

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

... es lo mismo que:

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

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

...o esto:

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

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

Answer 2

Por respuesta de @ patrickdw, jQuery establece el alcance de una devolución de llamada para un evento al elemento DOM sobre el cual se desencadenó el evento. Por ejemplo, consulte el parámetro eventObject en la documentación del controlador click().

Mi respuesta original (abajo) es útil cuando se desea crear un jQuery plug-in para que puedan invocar sus propios métodos personalizados en objetos jQuery y tienen el objeto jQuery establece como this durante la ejecución. Sin embargo, es no la respuesta correcta y simple a la pregunta original.

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

Editar: O bien, si (como sugirió) que desea agregar sólo un nombre para el método ~ mundial jQuery espacio de nombres:

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

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

o más en general:

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

Para obtener más información, consulte el jQuery Plugin Authoring Guide.

Answer 3

tiene que modificar su código a algo como esto:

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

añadir parámetros a showBox y hideBox para que puedan aceptar el elemento, y luego llamar a showBox($(this)) y hideBox($(this)).

Answer 5

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

Answer 6

en JavaScript puede utilizar call() o apply() para ejecutar una función y especificar explícitamente this para ello:

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

El primer parámetro dado a call() especifica el objeto que this se referirá a en la función. Cualquier otro parámetro se usa como parámetro en la llamada a la función.