.offset() 并检查 jQuery 中的位置

.offset() and checking the position in jQuery

本文关键字:位置 jQuery 检查 offset      更新时间:2023-09-26

这是我的HTML代码:

<div class="snake">
        <div class="body"></div>
    </div>

在脚本中,我有一个创建身体部位并将它们附加到.snake的函数。

它看起来像这样:

$('.btn1').click(function() {
    length++;
    $('<div></div>').addClass('body').appendTo('.snake').css('left', xPos * length * 1.2 + '%');   
});

然后另一个函数删除最后一个身体部分,创建一个新部分,将其放在顶部并赋予它.head类。

$('.snake').children().last().remove();
$('<div></div>').addClass('body').prependTo('.snake').css('top', 0 + '%').css('left', xPos * blocks_moved * 1.2 + '%');
$('.snake').children().removeClass('head');
$('.snake').children().first().addClass('head');

因此,每次调用此函数时,都会<div>给定.head类。

var headPos = $('.head').offset();
            alert(headPos);

在上面的两行代码中,我试图提醒.head的位置,但我使用了.offset(),所以它应该根据文档而不是父元素来提醒坐标。这两行也在上面的函数中。它会发出类似 [对象对象] 的警报。为什么这不起作用?我需要这个变量,这样我就可以.snake位置设置为与.head位置相同。

我用$('.snake').position(headPos);试过这个,但我认为.position()函数无法设置位置。任何其他方法都可以做到这一点,并提供一些.offset()帮助,那就太好了。我是编程新手,所以任何建议都会有所帮助。:)

附言

我又忘记了一件事。那么 css 呢?我应该使用哪些位置值?我用position: absolute;和头部和身体部位。

offset() 是一个包含两个属性的对象,topleft

使用 offset().top 获取 y 位置

var headPos_x = $('.head').offset().left;
var headPos_y = $('.head').offset().top;
alert("x:" + headPos_x + ", y:" + headPos_y);