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());
});

用jquery隐藏span

3 个答案: