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에 추가하는 대신 절대적으로 배치합니다.

당신은 이상 유혹과 그 세부 사항이 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에의 top 및 left CSS 값을 설정하는 것을 사용하고있는 DIV의 위치를 얻을 수 position을 사용할 수 있습니다 div가 Daniels의 조언을 고려하여 div가 먼저 감추어 져서 표시됩니다.

출처

2011-12-02 15:57:50

아주 좋아. –

대리인 http://jsfiddle.net/eVn6q/ –

을 사용하도록 변경되었으며 현재 jquery.on http://jsfiddle.net/NTUY3/ (sytax가 조금 더 좋음) –

세부 정보가 정적 정보 인 경우 사용자를 '표시 : 없음'으로 설정하고 사용자가 div를 가리키면 표시하는 것이 좋습니다. 당신이하고있는 일을하기에는 너무 비싸기 때문입니다.

출처

2011-12-02 15:59:54 Sergey

append를 사용하여 세부 정보 작성

답변

관련 문제