如何在不重复 jQuery addClass 的情况下做得更好？答案

【问题标题】：How to do this better without repeating jQuery addClass?如何在不重复 jQuery addClass 的情况下做得更好？
【发布时间】：2012-12-17 17:53:51
【问题描述】：

在页面加载时，我将输入中的默认文本设为浅灰色，如下所示：

var formInputs = $('#notifyForm input');
formInputs.addClass('defaultText');

然后我使用 removeClass 让它们在焦点上变回黑色。这一切都很好。我遇到的问题是，如果出现错误并且页面重新加载以显示 PHP 错误消息，则仍在输入中的用户文本变为灰色。我的解决方案是：

formInputs.addClass(function()
{
    if($(this).attr('value') === $(this).attr('title'))
    {
        $(this).addClass('defaultText');
    }
});

但我知道在 addClass 处理程序中调用 addClass 肯定有问题。谁能建议一个更好的方法来做到这一点？谢谢。

【问题讨论】：

【解决方案1】：

从您传递给addClass 的函数中，您可以返回一个字符串，该字符串将是您要添加的类名。试试这个：

formInputs.addClass(function() {
    if (this.value === this.title)
        return 'defaultText';
});

【讨论】：

【解决方案2】：

进一步罗里提供的答案，可以通过addClass()之前的条件进行选择：

 formInputs.filter(function() {
    return this.value === this.title;
 }).addClass('defaultText');

顺便说一句，有点令我惊讶的是，addClass() 方法的速度大约是filter() 方法的一半（在 Chrome 23/Win XP 中慢了 43%）（不过仍然是一个相当小的优化）。

参考资料：

【讨论】：