jQuery If-Else 代码段的 JavaScript 简写答案

【问题标题】：JavaScript Shorthand for a jQuery If-Else SnippetjQuery If-Else 代码段的 JavaScript 简写
【发布时间】：2013-01-27 22:09:25
【问题描述】：

我有这段代码：

<script type="text/javascript">
$(window).load(function() {
    if(!$.browser.msie){ 
        $('#myDiv').animate({opacity: 1}, 300);
    } else if ($.browser.msie) {
        $('#myDiv').css({opacity:1});
    }
}); 
</script>

如何使用" : something ? somethingElse " 语法说同样的话？

提前谢谢？

【问题讨论】：

不要将三元运算符用作通用 if/else。将它们用于简单的任务，这就是它们的设计目的。跨越更多行的真实 if/else 更具可读性。拥抱代码高尔夫的可读性。
总而言之，您可能不想这样做。嵌套的三元语法变得非常丑陋。
... else if ($.browser.msie) { 也是多余的。一个简单的else { 就足够了。
我 100% 同意你们，伙计们，但在这种情况下，出于某种原因，我确实需要“代码高尔夫”。
@Yoshi，谢谢你的指出，你是对的！

标签： javascript jquery shorthand

【解决方案1】：

你可以这样做：

$(window).load(function() {
    $.browser.msie ? $('#myDiv').css({opacity:1}); : $('#myDiv').animate({opacity: 1}, 300);
});

我不会推荐它至少有两个原因（浏览器嗅探和可读性），但你可以。

另一种方式：

$(window).load(function() {
    $('#myDiv')[$.browser.msie ? 'css' : 'animate']({opacity:1}, $.browser.msie ? undefined : 300);
});

...但这更糟。 ;-)

【讨论】：

谢谢。我理解不推荐它的意义，我只需要知道如何做到这一点。
请问@T.J. Crowder，在这种情况下你为什么反对浏览器嗅探？
@DimitriVorontzov：在这种情况下，我不反对浏览器嗅探，我反对它一般。 :-) 几乎 (almost) 总是更好的选择（例如特征嗅探）。
好的，@T.J.克劳德，那么也许你可以提出一个解决方案（我将不胜感激）：我正在嗅探浏览器，因为 IE 在动画 png 透明度方面做得很糟糕。在这种情况下，#myDiv 包含具有透明度的 png 图像。你会怎么做？
@DimitriVorontzov：不知道，我从来没有为 png 透明度设置动画。 :-) 但是考虑一下：如果 IE10 做得很好呢？但是，是的，这样的行为很难被察觉。 Kangax 在这里有一个很棒的清单：kangax.github.com/cft 你永远不知道，有时事情比看起来更容易被嗅到。

【解决方案2】：

但我不确定我是否得到了问题：

$.browser.msie ? $('#myDiv').css({opacity: 1}) : $('#myDiv').animate({opacity: 1}, 300);

另外，我不再是 IE 专家，但我想知道您是否可以这样做：

$('#myDiv').animate({opacity: 1}, $.browser.msie ? 0 : 300);

这应该立即应用，并通过外部变量使其更具可读性：

var speed = $.browser.msie ? 0 : 300;
$('#myDiv').animate({opacity: 1}, speed);

或者类似的东西。

【讨论】：

@ZERO，这太棒了！我喜欢使用 var 的想法。两全其美！
那么到底是什么意思呢？ IE 如何处理此代码？正如我所说，我不再是 IE 专家了，因为我不使用这个浏览器来完成我的工作，但在其他浏览器中代码的行为与预期一样——速度0 变化是立竿见影的。
我试过了，它对我有用：codepen.io/anon/pen/smJaD 这里唯一的问题是 $.browser 在 jQuery 1.9 中已被弃用和删除，所以你必须使用另一个版本。但所有使用$.browser 的解决方案都是如此。
在我的情况下，我尝试使用mozilla 而不是msie，因此使用Firefox 可以使其立即可见而无需动画；和其他的则与动画一起显示。
Ehe，在您使用我建议的代码的页面中，您忘记将其实际包装在 $(window).load(function() {…} 这就是它不起作用的原因：$('#gallery') 在元素不存在时执行得太快可能尚未加载，这就是为什么您什么都看不到的原因。只需将代码包装在$(window).load(function() {…} 中，一切都应该像其他版本一样工作。