jQuery Offset().left 不能正常工作答案

【问题标题】：jQuery Offset().left doesn't work properlyjQuery Offset().left 不能正常工作
【发布时间】：2012-11-07 02:27:16
【问题描述】：

我有一个关于 jQuery offset() 函数的问题。单击电子邮件图标后，我在我的网站上使用它来显示“给朋友发送电子邮件”窗口。

但是，窗口似乎粘在浏览器窗口的右侧，而不是图标的位置。您可以在 http://pec.solarismedia.net/calendarday.html 上看到它的实际效果

$(".emailFriend").hide(); $(".emailIcon").on("点击", function(e) { $(".emailFriend").css({ “位置”：“绝对”， "左": $(this).offset().left, "顶": $(this).offset().top }).fadeIn(500); 返回假； });

有一张图片显示了意图和现实之间的差异。

【问题讨论】：

无论您接受哪种 JS 解决方案，通过 CSS 定位 .emailtofriend 模态都是有意义的。包含.userTools 中的元素并使用相对位置。
你应该接受 Miszy 的回答，

标签： javascript jquery offset

【解决方案1】：

只使用位置代替。 .position() 方法允许我们检索元素相对于偏移父元素的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。

$(".emailFriend").insertBefore('.emailIcon').hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).position().left, 
        "top": $(this).position().top
    }).fadeIn(500);
    return false; 
});

添加了 appendTo('.userTools')。在相同位置显示的元素应该在同一个元素内。然后位置工作，即使你改变布局也会工作。

如果您出于任何原因不想更改 dom 结构，则应使用以下内容：

$(".emailFriend").hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).offset().left-$(".emailFriend").offsetParent().offset().left, 
        "top": $(this).offset().top-$(".emailFriend").offsetParent().offset().top
    }).fadeIn(500);
    return false; 
});

【讨论】：

这段代码也不行，你测试了吗？ $(this).position().top 等于 0，因为 position() 方法不以 CSS 的方式计算值。 CSS 将使用position: relative; 定位与最近祖先相关的元素，而 jQuery 只考虑父元素。
@Miszy 哇——对不起。 position 方法正是针对此类问题的。唯一的问题是 .emailFriend 与 .emailIcon 不在同一元素内的 dom 结构。
我只是玩了一下第二个答案并添加了一个 if 语句：if ($('.emailFriend').offset().left+$('.emailFriend').width() > $(window).width()) { $('.emailFriend').css('left', $(window).width()-$('.emailFriend').outerWidth()-$('.emailFriend').offsetParent().offset().left-20); } 只是为了使其不与视口重叠

【解决方案2】：

这是因为#container 有position: relative;。因此，邮箱的绝对设置是相对于#container 的。您必须删除该属性或计算 left 的值，如下所示：

$(this).offset().left - $('#container').offset().left

【讨论】：

如果周围没有“#container”怎么办？
@iRaS：这是一个相当没有意义的环境变化。如果没有.emailIcon怎么办？
我会问更重要的问题：如果用户的浏览器中没有启用 JS 怎么办？ ;)
@DavidHedlund 没问题，因为 $('.emailIcon').on("click", function() {}); 完全没有效果。