三元运算符JS无法正常工作

Question

我尝试这样做：

$('#hire_button').html(data.code == 500 ?  "<span class='alert alert-danger>" : "<span class='alert alert-success>" + data.info + "</span>");

但它返回或success>或空行。我做错了什么？

Answer 1

+具有比三元运算符更大的运算符优先级。小组要清楚。

$('#hire_button').html((data.code == 500 ? 
  "<span class='alert alert-danger>" : 
  "<span class='alert alert-success>") + data.info + "</span>");

Grouping运算符是您在此处使用的，因为它具有最高优先级。

MDN ON OPERATOR PRECEDENCE

Answer 2

? :三元运算符的优先级低于+并置运算符，因此您构建了不匹配的标记。

然而，恕我直言，你应该重构你的代码，以避免一些重复，并同时自动修复优先问题：

$('#hire_button').empty().append($('<span>', text: data.info, class: 'alert'})
   .addClass(data.code == 500 ? 'alert-danger' : 'alert-success'));

注意：上面重写了原来错误地将新类添加到按钮而不是封闭的范围。

Answer 3

试试这个：

$('#hire_button').html(data.code == 500 ?  "<span class='alert alert-danger>" : ("<span class='alert alert-success>" + data.info + "</span>"));