Question

我正在向contact form using Bootstrap进一步说“带有可选图标”。联系表格有4个字段，3个输入用于姓名，电子邮件和主题，1个textarea用于消息。这是目前的联系表格：

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

但此刻我无法弄清楚如何使焦点输入或textarea显示隐藏的跨度。

谢谢

Answer 1

您可以使用：

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

或

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

DEMO

Answer 2

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

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

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

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

2 个答案:

DEMO