javascript - 发现 if 语句中的特定参数不正确？

Question

假设我正在制作一份注册表单。现在我希望它突出显示四个字段中的空白字段。现在我可以只执行一堆 if-else 语句，但这将花费很长时间。

假设我有以下代码:

Javascript:

if($firstname === "" || $lastname==="" || $email ==="" && $phone === ""){
        //What goes here?
    }

我想通过括号内的信息来查找其中哪一个($firstname、$lastname 等)是正确的，然后允许它更改该特定变量的 css，以便我可以照亮输入字段以显示该信息尚未输入。

现有代码: http://jsfiddle.net/EVkge/

Click on JSFiddle to see code

Answer 1

你把这个复杂化了，只需将 addClass() 与匿名函数一起使用即可:

$('input').addClass(function () {
    return this.value == '' ? 'empty' : '';
});

JS Fiddle demo .

显然，将空类名更改为您想要的任何类名；您可能已经猜到 : 后面的 '' 是一个空字符串，如果 this.value 不存在，则会返回该空字符串等于''(?之前的评估)。

正如评论中所指出的，如果能够在相关 input 元素变为非空时删除添加的类，那就更好了；考虑到这一点，一个简单的方法的工作原理应该是显而易见的:

$('input:button').click(function () {
    $('input').each(function () {
        var that = $(this),
            val = that.val();
        if (val === '') {
            that.addClass('empty');
        } else {
            that.removeClass('empty');
        }
    });
});

JS Fiddle demo .

其次，还有一种更简洁的方法，相当于上面的方法:

$('input:button').click(function () {
    $('input').each(function(){
        $(this)[this.value == '' ? 'addClass' : 'removeClass']('empty');
    });
});

JS Fiddle demo .

这利用了这样一个事实:可以使用 Object.propertyName 和 Object['propertyName'] 表示法来访问对象的方法，还可以使用以下功能在这些方括号中运行条件(三元)运算符，以确定是否应使用 addClass() 或 removeClass() 方法来处理 empty 类名在下面的括号中提供。

引用文献:

• addClass() .
• removeClass() .
• Ternary/Conditional Operator .