隱藏跨度與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()); 
});