Vượt qua $ (this) đến một hàm

Question

Xin chào các bạn, Tôi đang cố gắng tạo danh sách phát phương tiện có thể nâng cao tín dụng, phát video và thay đổi tiêu đề khi di chuột qua, kết thúc video và nhấp/lần nhấp tiếp theo . Vì vậy, tôi cần phải viết một số chức năng mà sau đó có thể được gọi với nhau. Vì vậy, như thế này:

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

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

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

Vấn đề là $ (này) không mang các chức năng từ .hover. Làm thế nào để tôi làm điều này?

Cảm ơn sự giúp đỡ!

Answer 1

Các this sẽ thực hiện thông qua nếu bạn chỉ cần làm:

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

---

EDIT: Để giải quyết những câu hỏi trong các bình luận, điều này sẽ làm việc cho bất kỳ chức năng bạn gán như một sự kiện xử lý. Không quan trọng nếu nó là một chức năng vô danh hoặc một chức năng được đặt tên.

này:

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

... cũng giống như:

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

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

...hay này:

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

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

Answer 2

Mỗi câu trả lời của @ patrickdw, jQuery đặt phạm vi gọi lại cho sự kiện thành phần DOM khi sự kiện được kích hoạt. Ví dụ, xem tham số eventObject trong tài liệu cho trình xử lý click().

Câu trả lời gốc của tôi (dưới đây) hữu ích khi bạn muốn tạo trình cắm thêm jQuery để bạn có thể gọi các phương thức tùy chỉnh của riêng mình trên các đối tượng jQuery và đặt đối tượng jQuery là this trong khi thực thi. Tuy nhiên, đó là không phải là câu trả lời đúng và đơn giản cho câu hỏi ban đầu.

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

Sửa: Hoặc, nếu (như đề xuất) mà bạn muốn thêm chỉ có một tên cho phương pháp namespace ~ toàn cầu jQuery:

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

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

Hoặc tổng quát hơn:

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

Để biết thêm thông tin, hãy xem jQuery Plugin Authoring Guide.

Answer 3

Bạn cần phải sửa đổi mã của bạn để một cái gì đó như thế này:

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

Thêm tham số để showBox và hideBox để họ có thể chấp nhận nguyên tố này, và sau đó gọi showBox($(this)) và hideBox($(this)).

Answer 5

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

Answer 6

Trong javascript, bạn có thể sử dụng call() hoặc apply() để thực hiện một chức năng và chỉ định rõ ràng this cho nó:

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

Tham số đầu tiên trao cho call() quy định cụ thể đối tượng đó this sẽ tham khảo trong hàm. Bất kỳ tham số nào khác được sử dụng làm tham số trong lời gọi hàm.