Почему мой div не появляется?

Итак, я создал блок erb, который выполняет итерацию через набор изображений, а затем отображает div.tagged для каждого изображения в заданных координатах. В этом конкретном случае блок выполняет итерацию через 1 изображение, однако div.tagged не отображается на странице. Когда я проверяю элемент .tagged есть, но на самом деле не отображается. У кого-нибудь есть идеи, почему? Here is the HTML that is generated.And here is a screen shot of the inspected element Почему мой div не появляется?

Еврорадио:

<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 не отображается, но вы даете css-код из других div. Я бы поставил css для 'tagged' div too – rmagnum2002

Вы должны уметь отлаживать это проще, чем мы сможем, читая ваши код. С проверкой хрома вы можете редактировать свойства CSS и HTML, иметь игру, пока вы не сможете ее отобразить, возможно, подумайте о «z-index»? –

Я поместил это в [jsfiddle] (http://jsfiddle.net/kcYNR/3/), и я не смог ничего увидеть в тэге span. .I_connection. – iGbanam

Проверить this о ут; такой же jsfiddle, 5-й итерации.

Строка HTML, используемая в .append(), не была должным образом вложена. Отсутствовал закрывающий тег </div>. Кроме того, опасался, что произошел некоторый дисбаланс. Я решил использовать альтернативу jQuery для сборки HTML.

Предполагалось, что вы хотите вложить .tagged_box в .tagged. Если это предположение неверно, вы должны изменить

_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.

Cheers.

источник

2013-07-22 19:22:14 iGbanam

Почему мой div не появляется?

ответ

Смежные вопросы