1

行ごとにアンカータグを持つアクション列が 1 つあるテーブルがあります。アンカーのクリックごとに同じ divを設定して表示したいと考えています。

私はこれを行うことができますが、その div を、クリックして表示するアンカー タグと平行に表示したいと考えています。

問題 : すべてを作成し、正常に動作していますが、配置できません。現在、それは一番上に表示されており、ページの一番下の最後の行にあるアンカータグをクリックすると、div が一番上に再び表示されますが、一番下のアンカーと平行に表示したいです。

サンプルを表示するための jsFiddle を次に示します。 http://jsfiddle.net/8bLHF/

<div id="myDiv"><p>Hello</p></div>
<table border="1" cellpadding="10">
 <tr>
   <th>Action</th>
 </tr>
 <tr>
   <td><a id="anchor" href="#">1</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">2</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">3</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">4</a></td>
 </tr>
 <tr>
   <td><a id="anchor" href="#">5</a></td>
 </tr>
</table>

助けてください

4

3 に答える 3

4

フィドルはこちら

まず最初にid="anchor"クラスを作成しますclass="anchor」。

$(document).on('click', '.anchor', function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('#myDiv')
        .css({
        top: mousey,
        left: mousex
    });
    $("#myDiv").fadeIn();
});

$(document).on('click', '#myDiv', function () {
    $("#myDiv").fadeOut();
});
于 2013-07-05T07:26:23.823 に答える
3

オンクリックを次のように変更します。

$(document).on('click', '#anchor', function(e){
   $("#myDiv").offset({left:e.pageX,top:e.pageY});
   $("#myDiv").fadeIn();
});

これにより、div の位置がマウス クリックに変更されます。これを少し変更して、必要な結果を得ることができますが、これである程度のアイデアが得られるかもしれません。

于 2013-07-05T07:25:18.853 に答える
0

ここにデモhttp://jsfiddle.net/yeyene/8bLHF/5/があります

最初にアンカー ID をクラスに変更します。

$(document).on('click', '.anchor', function(){
    var p = $(this).parent('td');
    var position = p.position();
    $("#myDiv").css({
        'left':$('#myTable').width()+10 +'px', 
        'top':position.top+'px'
    });
    $("#myDiv").fadeIn();
});

$(document).on('click', '#myDiv', function(){
     $("#myDiv").fadeOut(); 
});
于 2013-07-05T07:31:16.827 に答える