En utilisant 'ceci' dans les fonctions imbriquées

Question

Wow .. pour obtenir de vraies informations sur 'ceci' est pas facile car google fondamentalement ignore le mot.

Le code ouvre une image à partir d'une base de données en utilisant les informations de la vignette .. l'onlick fonctionne, et le code hover fonctionne, mais je ne peux pas comprendre comment obtenir 'this' du mouseenter à utiliser dans le Fonction showModal.

 function showModal() { 
     $("body").css("overflow-y", "hidden"); 
     $(".small").removeClass("smallHover"); 
     $(".modal").fadeIn(200); 

     var altLong = $(this).attr("alt"); 
     var altSplit = altLong.split("#"); 
     $(".picTitle").text(altSplit[0]);           
     var srclong = $(this).attr("src"); 
     var srcshort = srclong.split("_"); 
     var srcextension = srclong.split(".");  
     $(".big").attr("src", srcshort[0]+'.'+srcextension[1]); 
    } 
    $(".small").click(showModal); 

    var timer; 
    $(".small").mouseenter(function() { 
     timer = setTimeout(function(){ 
      $(this).showModal(); // **<--this is the line that doesnt work** 
     }, 2000); 
    }).mouseleave(function() { 
     clearTimeout(timer); 
    }); 

aussi si vous pourriez expliquer pourquoi vous utilisez $ (this) comme objet jquery au lieu de simplement « ceci » et comment ils diffèrent, ce serait génial. Merci d'avance ~!

Answer 1

Il y a deux aspects distincts à cela.

1. Obtenir le droit this dans le rappel setTimeout

2. Appel showModal avec cette this

# 1 est adressée par this question's answers. Vous avez plusieurs options, le plus simple dans ce cas (pour l'instant) étant probablement utiliser une variable:

$(".small").mouseenter(function() { 
    var _this = this; // *** 
    timer = setTimeout(function(){ 
     $(_this).showModal(); // *** 
    }, 2000); 
}).mouseleave(function() { 
    clearTimeout(timer); 
}); 

... mais ce code ne fonctionne toujours pas, parce que showModal est pas une propriété d'objets jQuery , c'est une fonction autonome. Pour appeler avec un this spécifique, vous utiliseriez Function.prototype.call:

$(".small").mouseenter(function() { 
    var _this = this; 
    timer = setTimeout(function(){ 
     showModal.call(_this); // *** 
    }, 2000); 
}).mouseleave(function() { 
    clearTimeout(timer); 
}); 

(Alternativement, changer showModal d'accepter l'élément comme paramètre et passer juste comme argument.)

Plus sur this dans this question's answers as well, ainsi que this (old) post on my anemic little blog.

Answer 2

cela fonctionne aussi si vous pouviez changer votre fonction showmodel comme ceci:

$.fn.showModal = function() { 
     $("body").css("overflow-y", "hidden"); 
     $(".small").removeClass("smallHover"); 
     $(".modal").fadeIn(200); 
     ... 
    } 

et à l'intérieur méthode de minuterie

$(this).showModal();