使用 jQuery 显示特定的隐藏跨度答案

【问题标题】：Show specific hidden spans with jQuery使用 jQuery 显示特定的隐藏跨度
【发布时间】：2014-04-16 14:02:41
【问题描述】：

我正在制作一个contact form using Bootstrap，它会在“带有可选图标”的位置再往下一点。联系表格有 4 个字段，3 个输入名称、电子邮件和主题，以及 1 个文本区域用于消息。这是迄今为止的联系表格：

    <form action="contact_verify.php" class="form-horizontal" role="form" method="post">
        <div class="form-group">
            <label for="inputName" class="col-sm-2 control-label">Ingrese su Nombre *</label>
                <div class="col-sm-8 offset2">
                    <input type="text" class="form-control span6" id="inputName" name="inputName" placeholder="Nombre">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
        </div>
        <br />
        <div class="form-group" id="email">
            <label for="inputEmail" class="col-sm-2 control-label">Ingrese su Email *</label>
                <div class="col-sm-8 offset2">
                    <input type="text" class="form-control span6" id="inputEmail" name="inputEmail" placeholder="Email">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
        </div>
        <br />
        <div class="form-group">
            <label for="inputSubject" class="col-sm-2 control-label">Ingrese su Asunto</label>
                <div class="col-sm-8 offset2">
                    <input type="text" class="form-control span6" id="inputSubject" name="inputSubject" placeholder="Asunto">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
        </div>
        <br />
        <div class="form-group">
            <label for="inputText" class="col-sm-2 control-label">Ingrese su consulta *</label>
                <div class="col-sm-8 offset2">
                    <textarea class="form-control span6" rows="5" id="inputText" name="inputText" placeholder="Escriba su consulta..."></textarea>
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
        </div>
        <br />
        <div class="form-group offset7">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Enviar</button>
            </div>
        </div>
    </form>

现在我可以使用 jquery 隐藏跨度：

$("span").hide();

我的目标是一旦人们开始在每个字段上书写，带有引导程序的隐藏跨度就会出现在该字段上。到目前为止，一旦人们停止使用此功能输入，我已经设法使每个字段都变为绿色：

$(".form-group").keyup(function(){
    $(this).addClass("has-success has-feedback");
});

但目前我不知道如何使焦点输入或文本区域显示它的隐藏范围。

谢谢

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

你可以使用：

 $(this).next().show();

或

 $(this).siblings('span').show();

DEMO

【讨论】：

对不起，我忘了补充说我已经试过了 $(this).next().show();还是不行，试了下一个，还是不行
演示正在运行，尽管跨度出现在输入之外，而不是像引导演示那样出现在内部。我会检查一下，看看我能不能让它工作。不过还是谢谢大家

【解决方案2】：

为避免冲突，您应该这样尝试：

$("span.form-control-feedback").hide();
$(".form-control").keyup(function(){
    $(this).siblings('span.form-control-feedback').show();
});

如果 SPAN 的样式正确（可能是绝对的），那么它将位于 INPUT 字段中。

【讨论】：