2013-08-08 8 views
0

У меня есть инструкция if, которая проверяет, было ли изображение, отображаемое в DOM, первоначально меньше ширины 600 пикселей, и если бы это было так, изображение было изменено на другую ширину. Однако он не работает, я отлаживаю какое-то время и все еще не могу понять это. Есть идеи о том, почему?Почему это утверждение if не изменяет размер его уважаемого изображения?

JQuery

$('span.i_contact').each(function() {  

var imgWidth = $(this).data('imageWidth');  
console.log(imgWidth) 
if (imgWidth < 600) { 
    var newWidth = ((imgWidth/600) * 300); 
    console.log(this); 
    $(this).css({ 
     "width":newWidth 
    });  
} 


    var pos_width = ($(this).data('posWidth'))/2.025; 
    var pos_height = ($(this).data('posHeight'))/2.025; 
    var xpos = ($(this).data('posX'))/2.025; 
    var ypos = ($(this).data('posY'))/2.025; 
    var taggedNode = $('<div class="tagged" />') 
    taggedNode.css({ 
     "border":"5px solid orange", 
     "width":pos_width, 
     "height":pos_height, 
     "left":xpos, 
     "top":ypos 
    }); 

var n = $(this).data('index'); 
$('.i_tagmap' + n).append(taggedNode); 

}); 

$("span.o_contact").each(function() {  

var imgWidth = $(this).data('imageWidth'); 
if (imgWidth < 600) { 
    var newWidth = ((imgWidth/600) * 300); 
    console.log(newWidth); 
    $(this).css({ 
     "width":newWidth 
    });  
}  


    var pos_width = ($(this).data('posWidth'))/2.025; 
    var pos_height = ($(this).data('posHeight'))/2.025; 
    var xpos = ($(this).data('posX'))/2.025; 
    var ypos = ($(this).data('posY'))/2.025; 
    var taggedNode = $('<div class="tagged" />') 
    taggedNode.css({ 
     "border":"5px solid green", 
     "width":pos_width, 
     "height":pos_height, 
     "left":xpos, 
     "top":ypos 
    }); 

var n = $(this).data('index'); 
$('.o_tagmap' + n).append(taggedNode);  
}); 

ERB (как генерируются изображения)

<% n = steps.index(step) %> 
<h2 style="margin-left:20px;"> Step <%= n + 1%></h2> 
<div class="stepcontainer"> 
<div class="steptext"> 
    <%= step.instruction %> 
</div> 
<div class="modalbutton"> 
    <%= render(step.flags.new) %> 
</div> 


<% if step.input_contact.present? %> 
    <div class="productimg"> 
    <span class="i_contact i_contact<%= n %>" data-pos-x="<%= step.i_connection.pos_x %>" data-pos-y="<%= step.i_connection.pos_y %>" data-pos-width="<%= step.i_connection.pos_width %>" data-pos-height="<%= step.i_connection.pos_height %>" id="spanid<%= n %>" data-image-width="<%= step.i_connection.image.dimensions.first %>" data-index="<%= n %>"></span> 
     <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> 
      <%= link_to image_tag(step.i_connection.image.image.url(:medium), class: "iconnection"), "#{step.i_connection.image.image.url(:large)}", class: "fancybox" %> 
      <div class="i_tagmap<%= n %>"></div>  
     </div>  
    </div> 

    <% if step.i_connection.cord? && !step.o_connection.dongle? %> 
     <div class="cableimg"> 
      <%= image_tag(step.i_connection.cord_type.image.url(:thumb), :class => "orange") %> 
     </div> 
    <% end %>   
<% end %> <!-- end of step.input_contact.present --> 

<% if step.o_connection.cord? && !step.o_connection.dongle? %> 
    <div class="cableimg"> 
     <%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %> 
    </div>  
<% end %> 
<div class="productimg"> 
    <span class="o_contact o_contact<%= n %>" data-pos-x="<%= step.o_connection.pos_x %>" data-pos-y="<%= step.o_connection.pos_y %>" data-pos-width="<%= step.o_connection.pos_width %>" data-pos-height="<%= step.o_connection.pos_height %>" id="spanid<%= n %>" data-image-width="<%= step.o_connection.image.dimensions.first %>" data-index="<%= n %>"> </span> 
    <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> 
     <%= link_to image_tag(step.o_connection.image.image.url(:medium), class: "oconnection"), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %> 
     <div class="o_tagmap<%= n %>"></div> 
    </div> 
</div>    
</div> 

ответ

0

Попробуйте

var imgWidth = parseInt($(this).data('imageWidth')); 
+0

Это не работает либо:/ –

+0

на самом деле я имел проблемы с атрибуты данных верблюжьего случая, попробуйте изменить этот атрибут данных на ширину изображения вместо imageWidth, посмотрите, работает ли это. –

+0

На самом деле, если я не вижу этот атрибут данных в вашем фактическом HTML, уверены ли вы, что он возвращает значение вообще? –

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