3

我发现自己写了很多类似的代码：

$('.selector').addClass(condition ? 'class' : '');

我知道这可能很愚蠢和发牢骚，但我只是好奇是否有一种方法可以在没有 Javascript 中的错误条件的情况下做到这一点。我环顾四周，并没有真正找到任何可以做到这一点的运营商，但我可能（并且希望我是）错了。

我不一定要优化我的代码，这只是好奇:)

谢谢。

4

3 回答 3

8

JavaScript 的&&运算符短路。您会看到在许多脚本和库中常用的类似内容：

condition && $('.selector').addClass('class');

或者正如 mgibsonbr 的评论所述，您可以简单地&&在方法本身内：

$('.selector').addClass(condition && 'class');

但是，它的直观性要低得多，因为当两个值都为真时，这并不是一个众所周知的事实，它a && b会导致bJavaScript，并且true与其他语言没有什么不同。

于 2012-05-27T03:03:56.140 回答
2 
!condition || func();  // launch func only if condition holds

如果condition为假，!condition则为真。由于第一个操作数||为真，整个表达式为真。被func()短路并且不被调用。

如果condition为真，!condition则为假，因此func()必须调用以便评估析取。

于 2012-05-27T03:05:35.140 回答
1

您可以编写自己的 jQuery monadic 操作。尽管应该非常谨慎地使用它（以减少 $.* 命名空间的混乱），但如果您经常这样做，这仍然是最优雅的方式。

(function($) {
    $.fn.addClassIf = function() {  
        var args = Array.prototype.slice.call(arguments, 0, -1);
        var condition = Array.prototype.slice.call(arguments, -1)[0];

        return condition ? this.addClass.apply(this,args) : this;
    };
})(jQuery);

演示：

> $('body')
[<body class=​"question-page">​…​&lt;/body>​]

> $('body').addClassIf('test1', true)
[<body class=​"question-page test1">​…​&lt;/body>​]

> $('body').addClassIf('test2', false)
[<body class=​"question-page test1">​…​&lt;/body>​]

> $('body').addClassIf('test3', true)
[<body class=​"question-page test1 test3">​…​&lt;/body>​]
于 2012-05-27T03:21:27.690 回答