Verwenden von 'dies' in verschachtelten Funktionen

Question

Wow .. um echte Informationen über 'das' zu erhalten ist nicht einfach wie Google im Grunde ignoriert das Wort.

Der Code öffnet ein Bild aus einer Datenbank mit den Informationen aus dem Thumbnail .. der onlick funktioniert, und der Hover Code funktioniert, aber ich kann nicht herausfinden, wie man 'this' vom mouseenter holt, um in der benutzt zu werden showModal-Funktion.

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

auch, wenn Sie erklären könnte, warum Sie $ (this) als jquery Objekt statt nur ‚dies‘ und wie sie sich unterscheiden, das wäre toll verwenden würde. Vielen Dank im Voraus ~!

Answer 1

Es gibt zwei getrennte Aspekte.

1. Die richtige this im setTimeout Rückruf

2. Aufruf showModal mit diesem this

# 1 von this question's answers gerichtet. Sie haben mehrere Möglichkeiten, die einfachste in diesem Fall (vorerst) wahrscheinlich eine Variable zu verwenden sein:

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

... aber das Code immer noch nicht funktionieren, weil showModal keine Eigenschaft von jQuery Objekten Es ist eine eigenständige Funktion. So rufen Sie es mit einem bestimmten this, dann würden Sie Function.prototype.call verwenden:

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

(Alternativ showModal ändern das Element als Parameter zu übernehmen und dann einfach als Argument übergeben.)

Mehr auf this in this question's answers as well, sowie this (old) post on my anemic little blog.

Answer 2

dies wird auch funktionieren, wenn Sie Ihre Showmodel Funktion wie folgt ändern könnte:

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

und innerhalb Timer Methode

$(this).showModal();