将 if/else 语句编写为三元运算符答案

【问题标题】：writing if/else statement as ternary operator将 if/else 语句编写为三元运算符
【发布时间】：2016-05-26 18:09:28
【问题描述】：

如何使用三元运算符编写此代码？

if (!$('#privacy_check').is(':checked')) {
  $('#privacy_check').css('outline-color', 'red');
  $('#privacy_check').css('outline-style', 'solid');
  $('#privacy_check').css('outline-width', 'thin');
} else {
  $('#privacy_check').css('outline-color', 'none');
  $('#privacy_check').css('outline-style', 'none');
  $('#privacy_check').css('outline-width', '0');
}

我试过了

!$('#privacy_check').is(':checked') ? $('#privacy_check').css('outline-color', 'red'); $('#privacy_check').css('outline-style', 'solid');$('#privacy_check').css('outline-width', 'thin') :
$('#privacy_check').css('outline-color', 'none');$('#privacy_check').css('outline-style', 'none');$('#privacy_check').css('outline-width', '0');

【问题讨论】：

三元运算符，计算为一个值。你想让它评估一些价值吗？
不要。它只会使阅读变得更加困难，没有任何好处
好的，所以最好以正常的if/else statement 离开。谢谢！
“任何傻瓜都能写出计算机可以理解的代码。优秀的程序员写出人类可以理解的代码” stackoverflow.com/questions/522828/…
但是为什么呢？是什么失去了这 5 条线来拯救你？它是否更有效，否（不是处理时间）。是不是更容易阅读，不是。它是否会影响代码的处理，不。那为什么要改变呢？如果您想减少下载时间 (FYI)，您应该考虑使用缩小，例如 YUI

标签： javascript jquery

【解决方案1】：

简化。

CSS：

#privacy_check {
    outline: thin solid red;
}
#privacy_check:checked {
    outline: none;
}

无需 JavaScript。

【讨论】：

好的，但他要求的是基于 javascript 的解决方案 O.o
对不起，您一定误解了这个问题。我只想在未选中时显示红色
@NiettheDarkAbsol 我可能没有在问题中提供足够的信息来公平。我只想在尝试提交表单后显示红色
听起来像你想要的<input type="checkbox" required /> 加上#privacy_check:invalid {outline: thin solid red;}

【解决方案2】：

var $elem = $('#privacy_check');
$elem.css($elem.is(':checked') ?
    { outlineColor: 'none', outlineStyle: 'none', outlineWidth: 0 } :
    { outlineColor: 'red', outlineStyle: 'solid', outlineWidth: 'thin' })

【讨论】：

【解决方案3】：

试试这个：

var $elem = $('#privacy_check');

if($elem.is(":checked")){
    $elem.css("outline", "thin solid red");
}
else{
   $elem.css("outline", "none");
}

【讨论】：

您将 `$('#privacy_check') 放入变量中但没有使用它：D 我为您修复了它。

【解决方案4】：

你可以这样做

$('#privacy_check').change(function() {
  $(this).css({
    'outline-color': this.checked ? 'none' : 'red',
    'outline-style': this.checked ? 'none' : 'solid',
    'outline-width': this.checked ? '0' : 'thin'
  });
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="privacy_check" />

更简化为 @Rayon 建议

$('#privacy_check').change(function() {
  $(this).css("outline", this.checked ? 'none' : "thin solid red")
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="privacy_check" />

【讨论】：

考虑$("#privacy_check").css("outline", "thin solid red");..我想它会减少冗余代码..