javascript – this.offset不是单击函数中的函数

我创建了一个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;
}

我还想创建一个动画,以便我在列表中单击的项目向上移动以替换绿色的“替换此”框,如果有人也可以帮助它.

解决方法

事件处理程序中的这个(以及因此_this)引用了一个DOMElement,它没有offset()方法作为jQuery的一部分.要解决此问题,您可以使用$(this)创建一个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()调用的对象.