web-dev-qa-db-ja.com

jQuery Offset（）。leftが正しく機能しない

JQueryのoffset（）関数について質問があります。メールアイコンをクリックすると、自分のサイトで「友達にメール」ウィンドウを表示するために使用しています。

ただし、ウィンドウはアイコンの位置ではなく、ブラウザのウィンドウの右側に貼り付けられて表示されます。あなたはそれが実際に動いているのを見ることができます http://pec.solarismedia.net/calendarday.html

 $（ "。emailFriend"）。hide（）; 
 $（ "。emailIcon"）。on（ "click"、function（e）{
 $（ "。 emailFriend "）。css（{
" position "：" abstract "、
" left "：$（this）.offset（）。left、
" top "：$ （this）.offset（）。top 
}）。fadeIn（500）; 
 falseを返す; 
}）;

意図と現実の違いを示す写真があります。 

javascriptjqueryoffset
12
FilipBenes

その理由は #containerはposition: relative;。したがって、電子メールボックスの絶対設定は、＃containerに関連しています。プロパティを削除するか、次のような方法でleftの値を計算する必要があります。

$(this).offset().left - $('#container').offset().left
15
Michał Miszczyszyn

位置を代わりに使用するだけです。 .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; 
});
3
iRaS