使用append創建詳細信息

我正在嘗試爲列表中的每個div創建詳細信息。使用append創建詳細信息

到目前爲止，這個列表可能會很長。

所以，這是我迄今所做的：

examp：

HTML：

<div class='pics'>1</div> 
<div class='pics'>2</div> 
<div class='pics'>3</div> 
<div class='pics'>4</div> 
<div class='pics'>5</div> 
<div class='pics'>6</div>

JS：

$("div.pics").live("mouseover", function(){ 
    var $this = $(this); 
    var details = "<div id='details' style='border: solid red 1px; width: 300px; height: 300px; position: absolute;'>Detalhes do usuario</div>"; 
    $this.next().append(details); 
}); 

$("div.pics").live("mouseout", function(){ 
    if($("#details").length){ 
     $("#details").remove(); 
    } 
});

Made a live example

我現在有一些問題，這是更好的方式來這樣的事情？

和它不工作的追加與最後div我認爲它是因爲next()，我該如何解決？

我有點不知所措。

Thanjs！

來源

2011-12-02 Ricardo Binns

添加和刪除dom是非常昂貴的。你應該顯示並隱藏'div's。 –

@Daniel A. White：謝謝，'.detach（）'呢？ –

更糟糕...... –

我會在身體上創建div並絕對定位它，而不是將它附加到下一個div。

您可以使用position獲得的div你上空盤旋，並使用該設置top和left CSS值的細節div的

像這樣的事情http://jsfiddle.net/infernalbadger/9HBsh/12/

$("div.pics").live("mouseover", function(){ 
     var position = $(this).position(); 
     $('#details').css({top: position.top + 10, left: position.left + 110}) 
        .show();   
}); 

$("div.pics").live("mouseout", function(){ 
    $('#details').hide(); 
});

位置考慮丹尼爾斯的建議，以便首先隱藏div，然後定位並顯示。

來源

2011-12-02 15:57:50

非常好，對它感興趣。 –

更改它使用委託http://jsfiddle.net/eVn6q/ –

和現在jquery.on http://jsfiddle.net/NTUY3/（該sytax似乎有點更好） –

如果詳細信息是靜態信息，那麼最好將它們設置爲'display：none'，並且只在用戶將鼠標懸停在div上時才顯示。因爲做你做的事情太貴了。

來源

2011-12-02 15:59:54 Sergey

使用append創建詳細信息

回答

相關問題