0

DOM に表示された画像がもともと幅 600 ピクセルよりも小さかったかどうかを確認する if/else ステートメントがあります。そうでない場合は、別の幅にサイズ変更されます。ただし、if/else ステートメントは、幅 600px より小さい画像だけでなく、すべての画像に対してそうしているようです。また、クラス .tagMap が表示されない場合もあります (if/else ステートメントが存在する場合のみ)。理由はありますか？生成される HTML は次のとおりです。

jQuery if/else ステートメント

$('span.i_contact').each(function() {    
var imgWidth = $(this).data('img-width');    
if (imgWidth < 599) {
    var newWidth = ((imgWidth / 600)*300);
    console.log(newWidth);   
    $('.iconnection').css({
        "width":newWidth
    });    
} 

else{    
    var pos_width = ($(this).data('pos-width')) / 2.025;
    var pos_height = ($(this).data('pos-height')) / 2.025;
    var xpos = ($(this).data('pos-x')) / 2.025;
    var ypos = ($(this).data('pos-y')) / 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('img-width');
if (imgWidth < 599) {
    var newWidth = ((imgWidth / 600)*300);
    console.log(newWidth);   
    $('.oconnection').css({
        "width":newWidth
    });    
}    

else {
    var pos_width = ($(this).data('pos-width')) / 2.025;
    var pos_height = ($(this).data('pos-height')) / 2.025;
    var xpos = ($(this).data('pos-x')) / 2.025;
    var ypos = ($(this).data('pos-y')) / 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);       
});

else {
    var pos_width = ($(this).data('pos-width')) / 2.025;
    var pos_height = ($(this).data('pos-height')) / 2.025;
    var xpos = ($(this).data('pos-x')) / 2.025;
    var ypos = ($(this).data('pos-y')) / 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 (画像の生成方法)

<div class="stepcontainer">
<div class="steptext">
    <%= step.instruction %>
</div>
<div class="modalbutton">
    <%= render(step.flags.new) %>   
</div>


<% if step.input_contact.present? %>
    <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 %>" ="spanid<%= n %>" data-img-width="<%= step.i_connection.image.dimensions.first %>" data-index="<%= n %>"></span>   
    <div class="productimg">    
        <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 %>
<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-img-width="<%= step.o_connection.image.dimensions.first %>" data-index="<%= n %>"> </span>
<div class="productimg">
    <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>

4

1 に答える 1

0

600より小さい画像のみを変更するコードを取得するには、変更する必要があります

$('.iconnection').css({
    "width":newWidth
});

に

$(this).css({
    "width":newWidth
});

そうすれば、一致するクラスを持つすべての画像ではなく、反復で現在の画像のみが変更されます。

于 2013-08-07T21:41:41.767 に答える