jquery - jquery 输入模糊显示/隐藏类

Question

我目前正在构建一个 html 表单并使用 jquery 进行验证。

每个输入字段的设置如下：

<div class="controls">
    <input type="text" class="input-xlarge" name="name" id="name">
    <div class="info">&nbsp;</div>
    <div class="valid" style="display:none;">&nbsp;</div>
</div>

到目前为止，这是我的 jquery：

$('.controls input').blur(function() {                   
    if( !$(this).val() ) {                    
        $(this).css('border-color','red');
        $(this).find('.info').css('display','none');
        $(this).find('.error').css('display','inline-block');

这个想法是当用户查看表单时，信息 div 会显示。如果他们在不输入任何信息的情况下继续使用表单选项卡输入，则错误类将显示并删除信息类。

关于我哪里出错的任何想法？

干杯，丹

Answer 1

试试这个，你需要在siblings这里使用方法：

$('.controls input').blur(function () {
    if (!$(this).val()) {
        $(this).css('border-color', 'red');
        $(this).siblings('.info').css('display', 'none');
        $(this).siblings('.error').css('display', 'inline-block');
    }
});

Answer 2

您的选择器仅获取输入字段。

在您的代码的回调块中 $(this) 引用了输入标签。

试试这个：

     $(this).css('border-color','red');

     $(this).parents('.controls').find('.info').css('display','none');
     $(this).parents('.controls').find('.error').css('display','inline-block');