jQuery css() 在 if 语句中不起作用答案

【问题标题】：jQuery css() not working in if statementjQuery css() 在 if 语句中不起作用
【发布时间】：2013-08-08 01:50:01
【问题描述】：

我有一个 if 语句检查显示在 DOM 中的图像最初是否小于 600 像素宽，如果是，则将图像调整为不同的宽度。但是它不起作用。正确的值会显示在警报中，但不会在下面的一行中传递给 CSS。知道为什么会发生这种情况吗？

jQuery

$('span.i_contact').each(function() {    
var imgWidth = parseInt($(this).data('image-width'));    
console.log(imgWidth)
if (imgWidth < 600) {
    var newWidth = ((imgWidth / 600) * 300)  
    alert(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 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 = parseInt($(this).data('image-width'));
console.log(imgWidth)
if (imgWidth < 600) {
    var newWidth = ((imgWidth / 600) * 300);
    alert(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');
$(this).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">
        <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">   
            <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>   
            <%= link_to image_tag(step.i_connection.image.image.url(:medium), id: "iconnection#{n}" ), "#{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">
    <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">
        <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>
        <%= link_to image_tag(step.o_connection.image.image.url(:medium), id: "oconnection#{n}"), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %>
        <div class="o_tagmap<%= n %>"></div>
    </div>  
</div>              
</div>

【问题讨论】：

你知道设置宽度的 jQuery 行是设置 span 元素的宽度，而不是图像元素的宽度。
我不知道...您对如何将其传递给图像元素有任何建议吗？
我对 Ruby 一无所知，但是由于没有其他人愿意帮助您，我会这样说：看起来您的图像是 span 的兄弟，即图像位于同一个 div 中，并且位于跨度之后。如果那是真正发生的事情，那么在你的 js 中，你说$(this).css({ "width":newWidth }) 你应该说$(this).next().css({ "width":newWidth })。换句话说，你想在跨度之后设置下一个兄弟的css，而不是跨度本身。见jQuery .next()

标签： jquery css ruby-on-rails image

【解决方案1】：

在您的 jQuery 中，.each 指的是跨度，因此在 .each 内部，您需要遍历 DOM 才能访问图像。

由于图像似乎是跨度之后的直接兄弟，.next 似乎是合适的（尽管可以使用许多其他方法）：

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

【讨论】：