基於表格中單擊元素的Div定位

Question

我想知道是否有可能基於單擊表中的哪個元素來放置div 。 我的代碼中有一個圖像網格，如果單擊圖像，我希望在該圖像旁邊彈出一個語音氣球，為用戶提供一些對圖像進行處理的選項。

我目前有這個（盡管有更多圖片）：

<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的位置設置為絕對位置：

#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/