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