將if / else語句編寫為三元運算符

Question

我將如何使用三元運算符編寫此代碼？

 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'); 

Answer 1

簡化。

CSS：

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

無需JavaScript。

Answer 2

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

Answer 3

你可以做這樣的事情

 $('#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" /> 

Answer 4

嘗試這個：

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

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