this.offset non è una funzione all'interno di una funzione click

Question

Ho creato un jsfiddle per mostrare l'errore.

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

L'errore è che _this.offset non è una funzione. La console mi ha registrato ed è stato l'elemento <li> su cui ho fatto clic, quindi sono confuso perché questo non funziona.

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

voglio anche per creare un'animazione in modo tale che l'elemento clicco nella lista si muove fino a sostituire la casella verde "Sostituisci questo", se qualcuno potrebbe aiutare anche con quello.

Answer 1

this (e quindi _this) all'interno del gestore eventi si riferisce a un DOMElement che non ha il metodo offset() poiché fa parte di jQuery. Per risolvere questo problema è possibile creare un oggetto jQuery utilizzando $(this):

$('.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) 
}); 

notare inoltre l'uso dell'oggetto fornito ad una singola css() chiamata su più chiamate al lo stesso metodo.

Answer 2

sostituire le due righe:

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

con:

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

Come .offset() è una funzione jquery e _this è un elemento DOM.

---

anche per la vostra linea .css si devono avvolgere _this in $(...) nuovo perché _this è un elemento DOM e ** non un oggetto jQuery.