Question

我想知道是否可以根据单击表格中的哪个元素来定位div。我的代码中有一个图像网格，如果点击图像，我希望在图像旁边弹出一个speechballoon，让用户可以选择对图像做一些事情。

我目前有这个（虽然有更多图片）：

<div id="edit" class="popup"><center><p>Edit | Share | Delete</p></center></div>
<ul>
    <li>
        <img id="image1" class="image" src="01.png"/>
    </li>
    <li>
        <img id="image2" class="image" src="02.png"/>
    </li>
    <li>
        <img id="image3" class="image" src="03.png"/>
    </li>
</ul>

和Javascript：

$(".image").click(function(){
    var id = $(this).attr('id');
    $("#edit").fadeIn();
};

Answer 1

好吧，既然你正在使用jQuery，我建议使用offset函数（https://api.jquery.com/offset/）

你需要将编辑的位置设置为绝对，使用CSS：

#edit{
        position: absolute;
}

使用Javascript：

$(".image").click(function(){
    var id = $(this).attr('id');
    var offset = $(this).offset(); //get the clicked element's position
    offset.top += $(this).height(); // add the height, because we want the bubble
                                    // to be directly below
    $("#edit").offset(offset); //set 'edit's offset
    $("#edit").fadeIn();
});

查看小提琴：http://jsfiddle.net/SpacePineapple/h4FXb/

基于表中单击元素的Div定位

1 个答案: