Question

我正在使用以下jQuery代码在我的顶层菜单导航中找到活动链接的位置：

$(document).ready(){
    // Handles the triangle image sprite for the top navigation
$('#topnav a')
    .on({ 

        mouseenter: function() {

            var pos = $("#topnav a.active-top").offset();
            console.log("Top: " + pos.top + " Left: " + pos.left );

            // Get the position of the current hovered "a" element
            var upSprite = $("#upArrow").show(),
                pos = $(this).offset(),
                aWidth = $(this).width(),
                offsetTop = 27, // Adjust this to raise or lower the sprite
                offsetLeft = aWidth / 2; // Centers the element under the link


            upSprite
                .css({
                    "top": pos.top + offsetTop,
                    "left": pos.left + offsetLeft
                });

            //console.log("Top: " + pos.top + " Left: " + pos.left);

        },

        mouseleave: function() {
            // Hide the arrow once the mouse leaves
            $('#upArrow').hide();
        }

    });
}

现在，当我在此事件处理程序之外粘贴完全相同的代码时

 $(document).ready(function () {        
     var pos = $("#topnav a.active-top").offset();
     console.log("Top: " + pos.top + " Left: " + pos.left );
}

我的pos.left获得了完全不同的价值。

据我所知.offset（）应该给我相对于文档的位置，而不像.position（）这给我相对于父容器的位置。

当代码在.on（）事件处理程序的范围内时，是否会为其提供不同类型的上下文？我尝试使用$ .proxy（）无济于事。任何提示都表示赞赏。谢谢。

Answer 1

一旦DOM加载，

$(document).ready()就会触发;但在所有图像加载之前。在您通过重新绘制元素来检索offset()后，您会发现偏移量正在被更改。

要解决此问题，您可以改为处理$(window).load()事件，或者继续检索点击处理程序中的位置（这是我建议的）。

Answer 2

很难对此进行分析，因为我不完全知道“#topnav a.active-top”引用的元素以及（可能）修改其位置的其他元素。

我认为，在$（某事）.mouseenter（）之前的$（document）.ready（）之后会有一些处理（图像加载，改变某些元素的宽度/高度等）。

jQuery范围混乱

2 个答案: