Question

错误是_this.offset不是函数。我将其记录到控制台，这是我点击的<li>元素，所以我很困惑，为什么这不起作用。

＆＃13;

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

＆＃13;

#replace {
  height: 50px;
  width: 100px;
  background-color: green;
}

#list {
  height: 200px;
  overflow-y: scroll;
}

.item {
  height: 50px;
  width: 100px;
  background-color: blue;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<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>

＆＃13;

我还想创建一个动画，以便我在列表中单击的项目向上移动以替换绿色＆＃34;替换此＆＃34;盒子，如果有人也可以提供帮助。

我创建了一个jsfiddle来显示错误：https://jsfiddle.net/v5fjjwmj/2/

Answer 1

事件处理程序中的

this（以及_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()调用的对象。

Answer 2

替换这两行：

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

使用：

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

由于.offset()是一个jquery函数，_this是一个DOM元素。

同样对于.css行，您必须再次在_this中包含$(...)，因为_this是DOM元素而**不是jQuery对象。

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

2 个答案: