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的{{1}}哪个类，删除它并添加blur呢？

long_input_negative

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 doc的 .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 doc的 .is()

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

Answer 2

虽然@thecodeparadox已经回答了你原来的问题，但我想指出»你做错了«™ - 不知道你的班级实际做了什么。我猜测foo_negative类应该将颜色切换为红色或同样平凡的东西。

.short_input {
  width: 50px;
}

.long_input {
  width: 100px;
}

.negative {
  color: red;
}

现在，您可以保留short_input和long_input类，只需添加/删除negative类即可更改样式。如果您不知道这一点，请查看MDN CSS。

Answer 3

如果有一些值，此行!$(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');
        }
    }
});

请参阅 LIVE DEMO

找出哪个类触发了模糊

3 个答案: