$ (this) işlevine $ (0)

Question

Hey Guys, Kredi almak, video oynatmak ve başlığın üzerinde, videonun sonunda ve sonraki/önceki tıklatmalarda başlığı değiştirmek için medya oynatma listesi oluşturmaya çalışıyorum . Bu yüzden birlikte çağrılabilecek bazı fonksiyonlar yazmam gerek. Yani böyle:

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

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

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

sorun $ (this) .hover gelen fonksiyonlara barındırmaz olmasıdır. Bunu nasıl yaparım?

Yardımın için teşekkürler!

Answer 1

this sadece yaparsanız taşımayacak:

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

---

DÜZENLEME: yorumda soruyu ele almak için, bu bir olay olarak atamak herhangi bir işlev için çalışacak işleyicisi. Anonim bir işlev mi yoksa adlandırılmış bir işlev mi olduğu önemli değil.

Bu:

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

... aynıdır:

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

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

...ya bu:

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

call() verilen ilk parametre this anacağımızdan nesneyi belirtir:

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

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

Answer 2

@@ patrickdw'nin yanıtına göre, jQuery, etkinliğin geri çağrıldığı DOM öğesine bir olay için geri arama kapsamını ayarlar. Örneğin, click() işleyicisinin belgelerinde eventObject parametresine bakın. Eğer bir jQuery eklentisi, jQuery nesneler üzerinde kendi özel yöntemleri çağırmak, böylece oluşturmak istiyorum ve jQuery nesne yürütme sırasında this olarak ayarlanmış olduğunda

Benim asıl cevap (aşağıda) yararlıdır. Ancak, değil orijinal soruya doğru ve basit bir cevaptır.

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

Düzenleme: Ya (önerilen gibi) ~ küresel jQuery yöntemi ad alanına sadece bir ismi eklemek istiyorsanız: daha genel

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

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

Veya:

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

Daha fazla bilgi için, bkz. jQuery Plugin Authoring Guide.

Answer 3

Böyle bir şey için kodunuzu değiştirmeniz gerekir:

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

onlar elemanı kabul edebilmesi için showBox ve hideBox için parametreler ekleyin ve sonra showBox($(this)) ve hideBox($(this)) arayın.

Answer 5

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

Answer 6

JavaScript yılında bunun için this belirtmek açıkça bir işlevi yürütmek ve call() veya apply() kullanabilirsiniz işlevde. Diğer çağrılar, işlev çağrısında parametreler olarak kullanılır.