this.offset ist keine Funktion innerhalb einer Klick-Funktion

Question

Ich habe eine jsfiddle erstellt, um den Fehler anzuzeigen.

https://jsfiddle.net/v5fjjwmj/2/

Der Fehler ist, daß _this.offset nicht eine Funktion ist. Ich habe diese Konsole angemeldet und es war das <li> Element, auf das ich geklickt habe, also bin ich verwirrt, warum das nicht funktionieren würde.

HTML

<div id="replace"> 
    Replace this 
</div> 

<ul id="list"> 
    <li class="item">TEST</li> 
    <li class="item">TEST</li> 
    <li class="item">TEST</li> 
</ul> 

JS:

$('.item').click(function(e){ 
    var _this = this; 
    var topx = _this.offset().top; 
    var leftx = _this.offset().left; 
    var moveArea = $('#replace').offset().top; 
    var moveLeft = $('#replace').offset().left; 
    var moveUp = topx - moveArea - 50; 
    _this.css('position', 'absolute').css('top', moveUp).css('zIndex', 50).css('left', leftx); 
    _this.animate({ 
    top: -50, 
    left: moveLeft 
    }, 300) 
}); 

CSS:

#replace { 
    height: 50px; 
    width: 100px; 
    background-color: green; 
} 

#list { 
    height: 200px; 
    overflow-y: scroll; 
} 

.item { 
    height: 50px; 
    width: 100px; 
    background-color: blue; 
} 

Ich möchte auch eine Animation erstellen, so dass der Artikel, den ich in der Liste klicken bewegt sich nach oben zu ersetzen das grüne Kästchen "Replace this", wenn auch jemand damit helfen könnte.

Answer 1

this (und damit _this) in Ihrem Event-Handler bezieht sich auf ein DOMelement, das nicht die offset()-Methode als Teil von jQuery hat. Um dies zu beheben können Sie ein jQuery-Objekt erstellen $(this) mit:

$('.item').click(function(e) { 
    var $this = $(this); 
    var topx = $this.offset().top; 
    var leftx = $this.offset().left; 
    var moveArea = $('#replace').offset().top; 
    var moveLeft = $('#replace').offset().left; 
    var moveUp = topx - moveArea - 50; 

    $this.css({ 
     'position': 'absolute', 
     'top': moveUp, 
     'zIndex': 50, 
     'left': leftx 
    }).animate({ 
     top: -50, 
     left: moveLeft 
    }, 300) 
}); 

Auch die Verwendung des auf einen einzigen css() Anruf über mehrere Anrufe auf die gleiche Methode bereitgestellte Objekt beachten.

Answer 2

ersetzen diese beiden Linien:

var topx = _this.offset().top; 
var leftx = _this.offset().left; 

mit:

var topx = _this.offsetTop; 
var leftx = _this.offsetLeft; 

Als .offset() ist ein jquery Funktion und _this ist ein DOM-Element.

---

Auch für Ihre .css Linie haben Sie _this in $(...) wieder wickeln, weil _this ein Element DOM ist und ** kein Objekt jQuery.