javascript - 查找哪个类触发了模糊

Question

我使用以下函数执行验证：

//Validation
$('.sValidate').bind('blur', function() {
    if (!$(this).val()) {
        $(this).removeClass('short_input');
        $(this).addClass('short_input_negative');
        return false;
    }
});

我的大部分输入类都是short_input. 但其中一些也被命名为long_input.
我怎么知道input触发了的类blur，删除它然后添加long_input_negative？

<input type="text" id="loginname" name="loginname" class="short_input sValidate" value="JDoe">

Answer 1

您可以使用.hasClass()方法进行类检测：

$('.sValidate').bind('blur',function(){
    if (!$(this).val()){
        if( $(this).hasClass('long_input') ) {
            $(this)
                  .removeClass('short_input');
                  .addClass('short_input_negative');
        }

        if( $(this).hasClass('short_input') ) {
            $(this)
                 .removeClass('long_input');
                 .addClass('long_input_negative');
        }
    }
});

来自 jQuery 文档.hasClass()

确定是否为任何匹配的元素分配了给定的类。

另一种方法是使用.is()

$('.sValidate').bind('blur',function(){
    if (!$(this).val()){
        if( $(this).is('.long_input') ) {
            // do something of long_input
        }

        if( $(this).is('.short_input') ) {
           // do something of short_input
        }
    }
});

来自 jQuery 文档.is()

根据选择器、元素或 jQuery 对象检查当前匹配的元素集，如果这些元素中至少有一个与给定参数匹配，则返回 true。

Answer 2

如果有一些值，则此行!$(this).val()返回。false所以条件永远不会执行。

这样做： -

$('.sValidate').bind('blur',function(){
    if ($(this).val().length > 0){
        if ($(this).hasClass('short_input')) {
            $(this).removeClass('short_input');
            $(this).addClass('short_input_negative');
        }
        if ($(this).hasClass('long_input')) {
            $(this).removeClass('long_input');
            $(this).addClass('long_input_negative');
        }
    }
});​

参考现场演示

Answer 3

虽然@thecodeparadox 已经回答了您最初的问题，但我想指出»您做错了«™ - 不知道您的课程实际上做了什么。我猜这foo_negative门课应该把颜色改成红色或类似的东西。

.short_input {
  width: 50px;
}

.long_input {
  width: 100px;
}

.negative {
  color: red;
}

现在，您可以保留short_input和long_input类并简单地添加/删除negative类来改变您的样式。如果您不知道这一点，请查看MDN CSS。