我创建了一个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) });
原文地址:https://www.jb51.cc/js/157955.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。