如果 else 語句作為三元運算符，我將如何編寫此語句

Question

這是一個初學者的問題，但我如何將這個 JavaScript 語句編寫為三元運算符？ 或者寫這個的最干凈/最優化的方式是什么？

if ($("#firstName,#lastName, #email, #message").filter(function() { return $(this).val(); }).length > 0) {
   $("label").css(labelAnimation[0]);
 } else {
   $("label").css(labelAnimation[1]);
 }

Answer 1

為了保持可讀性，首先將 boolean 結果放入變量中。 然后將條件放在索引查找括號內：

const anyInputsFilled = $("#firstName,#lastName,#email,#message")
    .filter(function () { return $(this).val(); })
    .length > 0;
$("label").css(labelAnimation[anyInputsFilled ? 0 : 1]);

我建議先從labelAnimation中提取值，例如：

const [anyFilledCSS, noneFilledCSS] = labelAnimation;
// ...
const anyInputsFilled = $("#firstName,#lastName,#email,#message")
    .filter(function () { return $(this).val(); })
    .length > 0;
$("label").css(anyInputsFilled ? anyFilledCSS : noneFilledCSS]);

Answer 2

你可以做這樣的事情

$(
  "#firstName,#lastName,#email,#message").filter(
    function() { 
      return $(this).val(); 
    }
  ).length > 0
)
? $("label").css(labelAnimation[0]) : $("label").css(labelAnimation[1])

或者在一行中：

$("#firstName,#lastName,#email,#message").filter(function() {return $(this).val();}).length > 0) ? $("label").css(labelAnimation[0]) : $("label").css(labelAnimation[1])

Answer 3

你可以寫

$("label").css(labelAnimation[
    $("#firstName,#lastName,#email,#message").filter(() => $(this).val())
        .length > 0 
           ? 1
           : 0
])