this.offsetはクリック機能内の関数ではありません

Question

エラーを表示するためにjsfiddleを作成しました。

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

エラーが_this.offsetが機能しないということです。私はこれを記録したコンソールで、私がクリックしたのは<li>の要素だったので、なぜこれがうまくいかないのか混乱しています。

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

私も、私は、リスト内をクリックした項目を交換するまで移動するようにアニメーションを作成したい

誰かがそれを手伝うことができるならば、緑色の "Replace this"ボックス。

Answer 1

this（したがって、_this）は、offset()メソッドを持たないDOMElementをjQueryの一部として参照しています。

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

も同じメソッドを複数回呼び出し上の単一css()コールに提供されたオブジェクトの使用に注意してください。この問題を解決するには、$(this)を使用してjQueryオブジェクトを作成することができます。

Answer 2

交換の2行：

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

有する：.offset()同様

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

はjqueryの関数であり、_thisはDOM要素です。

あなたは _thisはDOM要素と**ないjQueryオブジェクトであるため、再び $(...)で _thisをラップする必要があなたの .cssライン用も

---

。