使用 jquery 隐藏跨度

Question

^ no, it does not answer the question at all

I have got 4 input fields and 4 span. Each span shows the value from corresponding input field.

What I want to achieve, is hiding empty span. Removing string from inputbox makes the span empty, but it is not what I want. I want to not display it. At this moment when you leave field 3 empty, it will just leave a blank hole between field 2 and field 4. I simply want the field 4 to hop into the place of fields 3.

Any way to achieve this?

<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 updated with craig1231 solution 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

Try like,

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

If you don't want to consider the space then use like,

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

Answer 3

You could check the length of the field on key up.

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