爲什麼不是我的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顯示出來？

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標記不顯示，但你給其他div的css代碼..我會把css放在'tagged' div – rmagnum2002

你應該能夠通過閱讀你的代碼來更容易地進行調試碼。通過使用chrome檢查，你可以編輯CSS和HTML屬性，直到你可以展示它爲止，你可以考慮'z-index'嗎？ –

我把這個放在[jsfiddle]（http://jsfiddle.net/kcYNR/3/）中，我一直無法看到你的span'.i_connection'標籤中的任何東西。 – iGbanam

檢查thisØ UT;同樣的jsfiddle，第5次迭代。

.append()中使用的HTML字符串未正確嵌套。有一個關閉</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。

乾杯。

來源

2013-07-22 19:22:14 iGbanam

爲什麼不是我的div顯示出來？

回答

相關問題