隐藏跨度与jquery

Question

^不，它根本不回答这个问题

我有4个输入字段和4个跨度。每个跨度显示来自相应输入字段的值。

我想实现的是隐藏空跨度。从输入框中删除字符串使跨度空白，但它不是我想要的。我想不显示它。在这个时候，当你离开场3空的时候，它会在场2和场4之间留下一个空洞。我只是希望场4跳到场3的位置。

任何方式来实现这个？

<tr> 
<td><h2>Field1</h2> 
<input type="text" value="0" class="field1" type="number" min="0" max="20" maxlength="2" size="5"></td> 
<td><h2>Field 2</h2> 
<input type="text" value="101" class="field2" maxlength="4" size="5"></td> 
    <td><h2>Field3 - hide span when im empty</h2> 
<input type="text" value="0" class="field3" type="number" min="0" max="20" maxlength="2" size="5"></td> 
<td><h2>Field 4</h2> 
<input type="text" value="101" class="field4" maxlength="4" size="5"></td> 
</td> 
    </tr> 
    <br><br> 

    Field1: <span class="genaug"><span class="field1"></span>%</span><br /> 
     Field2: <span class="genpd"><span class="field2">0</span></span><br /> 
     <b><span class="genaug"><span class="field3"></span></span><br /></b> 
Field4: <span class="genpd"><span class="field4">0</span></span> 

$("input.field1").on("keyup",function() { 
    $("span.field1").html($(this).val()); 
}); 
$("input.field2").on("keyup",function() { 
    $("span.field2").html($(this).val()); 
}); 
$("input.field3").on("keyup",function() { 
    $("span.field3").html($(this).val()); 
}); 
$("input.field4").on("keyup",function() { 
    $("span.field4").html($(this).val()); 
}); 

if ("input.Field3".length) span.style.display = "none"; 

的jsfiddle与craig1231解决方案http://jsfiddle.net/jRwDg/7/

Answer 1

$("input.field1").on("keyup",function() { 
    var vl = $(this).val(); 
    if (vl == "") { 
     $("span.field1").hide(); 
    } 
    else { 
     $("span.field1").show().html(vl); 
    } 
}); 

Answer 2

尝试像，更新

if($("input.field3").val()=="") $("span.field3").css("display", "none"); 

如果你不想考虑那么空间使用像，

$.trim($("input.field3").val()) 

Answer 3

你可以检查关键字上的字段长度。

$("input.field3").on("keyup",function() { 
    if ($(this).length==0) 
     $("span.field3").hide() 
    else 
     $("span.field3").show().html($(this).val()); 
});