0

ユーザーがクリックしたリンクの場所を基準にして配置されたdivを表示する必要があります。

ユーザーがクリックするリンクも実際には動的に生成され、そのように見えます。

<td><a href='' onClick="showDiv(14)">Show the div</a></td>

（14は、DIVに必要な行のレコードのIDです）

これが私のshowDiv（）関数です

function showDiv(id){

// get the mouse coordinates of the link
var mouseX;
var mouseY;

$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
   $('#myDiv').show().css({'top':mouseY,'left':mouseX});
});  
}

これは実行時のDIVを示していますが、相対的なものではありません。私はここで少し離れているように感じます、JSは私の強みではありません。

4

2 に答える 2

3

コードに関するいくつかの問題：

<a href="showDiv(14)">

そうしないでください。どちらかといえば、そうあるべきですjavascript:showDiv(14)。属性を使用するonclickか、jQueryの.click()イベントを使用して実行する必要があります。<a>また、タグを終了しませんでした。

<td><a href='' onClick="showDiv(14)">Show the div</td>

する必要があります

<td><a href="#" onClick="showDiv(14)">Show the div</a></td>

別の問題：$('##myDiv')する必要があります$('#myDiv')。

ソリューション：

まず、divを絶対的に配置する必要があります。

#myDiv {
    position: absolute;
}​

これが、位置の特定のX座標とY座標を指定できる唯一の方法です。

私もあなたのリンクをに変更しました

<a href='#' class="showTooltip">Show the div</a>

したがって、jQueryを使用して、showTooltipクラスを持つすべてのリンクのクリックイベントにバインドできます。

最後に、jQuery：

$(".showTooltip").click(function() {
    var left = $(this).position().left;
    var top = $(this).position().top;
    $('#myDiv').css({
        top: top + 5 + "px",
        left: left + 5 + "px"
    }).show();

});

$(this)クリックされた要素を指します。私はその位置を取得し、myDivあなたが持っていたのと同じようにの位置を設定することができます。また5px、それをオフセットする方法を示すために、上部と左側に余分なものを追加しました。

デモ

于 2012-06-19T23:25:15.130 に答える
3

私は先に進んで、あなたの問題の解決策を備えたjsFiddleを作成しました。

重要なのは、関数をクリックハンドラーにバインドすることです。

Javascript

$("selector to your element").click(function(e) {
   mouseX = e.pageX;
   mouseY = e.pageY;

  $("#myDiv").show().css({'top':mouseY,'left':mouseX});
});

また、フィドルに記載されているように、divはで非表示にする必要がありますdisplay:none;

リンクをもう一度クリックしてdivを非表示にしたいので、私は先に進んでこれを少し自分で拡張しました。あなたはこのフィドルでそれを見つけることができます。

于 2012-06-19T23:44:23.410 に答える