用于text（）的jQuery条件语句（三元）

Question

I'm trying to set the text value of an element (promo-footer) to the contents of a variable (footerVar) if it is not an empty string ''.

$('.promo-footer').text(footerVar == '' ? 'no' : footerVar);

That works, and only displays the footer text if it exists, and the variable is an empty string '' then it displays "no"...

My question is - why does this work? I thought the first thing after the question mark happens if the equation evaluates to true ?

x = (1 < 2) ? true : false;

Here it is in action: https://jsfiddle.net/xfzgaLq6/

Answer 1

This footerVar == '' to true when footerVar is an empty string. But in your case it is a non empty string. So it evaluates to false and the expression belongs to false part got returned. ie] after :

The following example would clarify your doubt on ternary operator usage.

var x = (true) ? 10 : 20;
console.log(x); //10;

var x = (false) ? 10 : 20;
console.log(x); //20;

This is the syntax for ternary operator ,

(condition) 
  ? expression has to be returned when condition evaluates to true
  : expression has to be returned when condition evaluates to false

Answer 2

You right, Because if the footerVar === ' ', then the condition is true.(footer is empty ) and it return the first statement. and if footerVar is not empty then the condition is false and it return the 2nd statement.

Answer 3

It works the way it should.

var promotionObj = {};
promotionObj.footer_text = "foot test";

// This works, says "foot test".  Why??
$('.promo-footer').text(promotionObj.footer_text == '' ? 'no' : promotionObj.footer_text);

// This says "no":
$('.promo-footer').text(promotionObj.footer_text == '' ? promotionObj.footer_text : 'no');

Now considering the above code which is from the fiddle you posted. The first one says "foo test" because promotionObj.footer_text is not an empty string. The second part of the code says "no" because you interchanged the arrangement of the expression in which the value of the variable: promotionObj.footer_text will only be used as the footer text if it is empty and in this case it is not empty, therefore "no" will be displayed in its stead.

Consider this.

var arg = 5;
var result = arg > 10 ? arg : 0;  // result contains 0
var result = arg > 10 ? 0 : arg // result contains 5 which is the value of arg

I hope the explanation is clear.