0
DOM에 표시된 이미지의 원래 크기가 600px보다 작은 지 여부를 확인하는 if 문이 있고 이미지 크기가 다른 경우 이미지의 크기가 조정됩니다. 그러나 그것은 작동하지 않는다, 나는 잠시 동안 디버깅을하고 있었고 여전히 이것을 파악할 수 없다. 왜 어떤 아이디어?왜이 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>
:와/ –
실제로 내가 했어 문제 낙타의 경우 데이터 속성, 해당 데이터 속성을 imageWidth 대신 imagewidth로 변경해보십시오. 작동하는지 확인하십시오. –
실제로 그 문제에 대해서는 실제 HTML에서 데이터 속성을 보지 못했습니다. 값을 반환하고 있습니까? –