0

次の 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() を使用してみましたが、役に立ちませんでした。どんなヒントでも大歓迎です。ありがとう。

4

2 に答える 2

3

$(document).ready()DOMがロードされると起動します。ただし、すべての画像が読み込まれる前に。offset()これにより要素を再描画してを取得した後、オフセットが変更されていることがわかります。

これを修正する$(window).load()には、代わりにイベントを処理するか、クリックハンドラー内の位置を取得し続けることができます（これは私がお勧めします）。

于 2012-04-18T14:49:26.977 に答える
1

「#topnava.active-top」によって参照される要素や、​​（おそらく）その位置を変更する他の要素が正確にわからないため、これを分析するのは困難です。

$（document）.ready（）の後、$（something）.mouseenter（）の前に、いくつかの処理（画像の読み込み、一部の要素の幅/高さの変更など）があると思います。

于 2012-04-18T14:56:02.747 に答える