ajax append 块中的 if 语句答案

【问题标题】：if statement in ajax append blockajax append 块中的 if 语句
【发布时间】：2014-12-14 01:03:56
【问题描述】：

我有一个处理来自外部 API 的 json 响应的 ajax 块。我有一个名为 status 的对象字段，根据状态，我想显示相应的工具提示。目前，我正在尝试使用 if 语句执行此操作，但出现错误。

错误是：

Uncaught SyntaxError: Unexpected token if

Ajax 块

<script type="text/javascript">
  $.ajax({
    url: "pull_overview",
    dataType: "json",
    cache: false,
      success: function(data){
        if ( data == null ) {
          $('#ajax-loader').hide()
          $('#overviewlist tbody').append("<tr><td colspan='100'><h3><center>You have no recent transactions.</center></h3></td></tr>");
        } 
        else {
          $('#ajax-loader').hide()
          $.each(data, function(index, element) {
            $('#overviewlist tbody').append("<tr><td>"    + element.name + "</td><td>" 
                                                          + element.time + "</td><td>" 
                                                          + element.type + "</td><td>"
                                                          + element.change_in_balance + "</td><td>"
                                                          + element.method + "</td><td>"
                                                          + 
                                                          if (element.status == 'New Transaction') {
                                                            "<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>"
                                                          } 
          });
        }
    }
  });
</script>

【问题讨论】：

使用 (element.status == 'New Transaction' ? "...data inside if..." : "" ;) 而不是你的 if

标签： javascript jquery ajax

【解决方案1】：

就像错误所说的，你有一个 SyntaxError。固定代码为：

$.ajax({
    url: "pull_overview",
    dataType: "json",
    cache: false,
    success: function (data) {
        if (data == null) {
            $('#ajax-loader').hide()
            $('#overviewlist tbody').append("<tr><td colspan='100'><h3><center>You have no recent transactions.</center></h3></td></tr>");
        } else {
            $('#ajax-loader').hide()
            $.each(data, function (index, element) {
                $('#overviewlist tbody').append("<tr><td>" + element.name + "</td><td>" + element.time + "</td><td>" + element.type + "</td><td>" + element.change_in_balance + "</td><td>" + element.method + "</td><td>" + element.status == 'New Transaction' ?
                    "<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>" : "");
            });
        }
    }
});

有什么变化？

一些缺少的括号
您不能在字符串中包含if 语句（例如"foo" + if(something) "bar"）。改用三元运算符："foo" + something ? "bar" : ""

有用的资源：

【讨论】：

【解决方案2】：

您不能在最后一次 append 调用中将 if 语句放在字符串连接的中间。改为这样做

content = "<tr><td>" + element.name + "</td><td>" 
          + element.time + "</td><td>" 
          + element.type + "</td><td>"
          + element.change_in_balance + "</td><td>"
          + element.method + "</td><td>";
if (element.status == 'New Transaction')
    content += "<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>";
$('#overviewlist tbody').append(content);

【讨论】：