내 div가 표시되지 않는 이유는 무엇입니까?

그래서 이미지 세트를 반복하고 표시 지정된 좌표에 각각의 이미지에 대한 div.tagged ERB 블록을 만들었다. 이 특별한 경우 블록은 1 개의 이미지를 반복하지만 div.tagged는 페이지에 표시되지 않습니다. 요소를 검사 할 때 .tagged가 있지만 실제로 표시되지 않습니다. 누구나 왜 그런 아이디어가 있습니까? Here is the HTML that is generated.And here is a screen shot of the inspected element 내 div가 표시되지 않는 이유는 무엇입니까?

ERB :

<div class="container"> 

<% if @new_manual.present? %> 
<% @new_manual.steps.each do |step| %> 
    <% i_connection = Contact.find(step.input_contact) %> 
     <span class="i_connection" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>" data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" data-image=> </span> 
<br> 

<div class="image_panel"> 
    <%= image_tag(i_connection.image.image.url(:large)) %> 
<div class='i_connection'></div> 
</div> 

<% end %> 
<% end %> 

</div>

jQuery를 :

<script type="text/javascript"> 
$(document).ready(function(){ 

$("span.i_connection").each(function() { 
    var pos_width = $(this).data('pos-width'); 
    var pos_height = $(this).data('pos-height'); 
    var xpos = $(this).data('pos-x'); 
    var ypos = $(this).data('pos-y'); 

    $(".tagged_box").css("display","block"); 
    $(".tagged").css("border","5px solid red"); 


     $('.i_connection').append('<div class="tagged" style="width:'+pos_width+'px;height:'+pos_height+'px;left:'+xpos+'px;top:'+ypos+'px;" ><div class="tagged_box" style="width:'+pos_width+'px;height:'+ 
      pos_height+'px;" style="position:absolute;"></div>') 
}); 
});

CSS :

.i_connection div{ 
    display:block; 
    position:absolute; 
} 

.image_panel{ 
    float:left; 
    width:600px; 
    position:relative; 
} 
.image_panel img{ 
    left:0;top:0px; 
    max-width: 600px; 
    overflow: hidden; 
}

출처

2013-07-22 Eric Filkins

당신이 말하는 div 태그가 표시되지 않지만 다른 divs에서 CSS 코드를 제공하고 있습니다. 나는'tag div '에 대해서도 CSS를 넣을 것입니다. – rmagnum2002

당신은 이것을 읽을 수있을 것보다 더 쉽게 디버깅 할 수 있어야합니다. 암호. 크롬으로, 당신은 CSS와 HTML 속성을 편집 할 수 있습니다 검사 당신이 보여 얻을 수있는 주변까지 플레이가, 아마,'Z-index'을 고려? –

이것을 [jsfiddle] (http://jsfiddle.net/kcYNR/3/)에 넣었고'.i_connection' 태그에서 아무것도 볼 수 없었습니다. – iGbanam

확인 this 오 유; 같은 jsfiddle, 5 번째 반복.

.append()에 사용 된 HTML 문자열이 제대로 중첩되지 않았습니다. 닫기 </div> 태그가 누락되었습니다. 또한, 일부 불균형이 계속 발생했다는 우려가있었습니다. jQuery 대안을 사용하여 HTML을 작성하기로 결정했습니다.

난 당신이 .tagged에 둥지 .tagged_box 싶었 가정. 이 가정이 잘못되면, 당신은 당신이 원하는 어느 위해

_tagged.append(_tagged_box); 
$('div.i_connection').append(_tagged);

...에 ...

$('div.i_connection').append(_tagged_box); 
$('div.i_connection').append(_tagged);

을 ... 변경해야합니다.

p.s : .i_connection의 다른 클래스 이름을 찾으려면 jQuery 섹터가 부모 범위와 내부 div를 일치시키기 때문에 좋습니다.

건배.

출처

2013-07-22 19:22:14 iGbanam

내 div가 표시되지 않는 이유는 무엇입니까?

답변

관련 문제