如果 else 语句作为三元运算符，我将如何编写此语句

Question

This is kind of a beginners question but how would I write this JavaScript statement as a ternary operator? Or what would be the cleanest / most optimal way to write this?

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

Answer 1

To keep things somewhat readable, put the boolean result into a variable first. Then put the conditional inside the index lookup brackets:

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

I'd suggest extracting the values from labelAnimation first though, eg:

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

Answer 2

You can do something like this

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

Or in one line:

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

Answer 3

You can write

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