javascript - 语法错误 : expected expression, 获取关键字 'if'

Question

我这里有一个问题，如果你们能帮助我，我会很高兴。因此，我想在第一行中隐藏按钮“changeOrderUp”，并希望在最后一行找到“changeOrderDown”按钮时隐藏它。但 FireBug 返回此错误:“SyntaxError:预期表达式，获取关键字 'if'”，我无法确定原因。请帮我!

这是我的js代码:

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
    $('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
    <td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
    <td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
    <td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+if(ordem == 1){ document.write('hide');}+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+if(ordem == (data.var_pergunta).length)){ document.write('hide');}+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }

Answer 1

Javascript 不允许内联 if 条件。如果您需要内联条件，您应该使用 ternary operator ，其行为非常类似于 if block 。

最重要的是，您不应该使用document.write。它不会返回用于连接的字符串，但会删除文档并仅将该字符串写入页面。

您应该替换每个实例

if(ordem == 1){ document.write('hide');}

类似的东西

(ordem === 1 ? 'hide' : '')

这将:

1. 严格将 ordem 与 1 进行比较(=== 比 == 更严格)
2. 如果比较正确，则返回'hide'
3. 否则返回空字符串

您还可以通过在每行末尾放置 + 来简化代码，而不是转义换行符。使用这样的转义有点难以阅读。

总而言之，我会将该片段重构为:

for (var ordem = data.var_pergunta.length; ordem >= 1; --ordem){
  $('<tr><td class="ordem-pergunta-' + ordem + '">' + ordem + '</td>' +
    '<td class="ds-pergunta-'+ordem+'">' +
      data.var_pergunta[ordem - 1].ds_pergunta +
    '</td>' +
    '<td class="cd-pergunta-'+ordem+' hide">' +
      data.var_pergunta[ordem - 1].cd_pergunta +
    '</td>' +
    '<td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary ' +
      (ordem === 1 ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-up"></i></button>' +
    '<button id="'+ordem+'" class="btn-change-order-down btn btn-info ' +
      (ordem === data.var_pergunta.length ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-down"></i></button>' +
    '</td></tr>').insertAfter('.tr-ordem-pergunta');
}

对于这么长的字符串，您最好考虑使用真正的模板库，例如 Handlebars.js 。作为模板编写，您的字符串可能会变成:

<tr>
  <td class="ordem-pergunta-{{ordem}}">{{ordem}}</td>
  <td class="ds-pergunta-{{ordem}}">{{prev_ordem.ds_pergunta}}</td>
  <td class="cd-pergunta-{{ordem}} hide">{{prev_ordem.cd_pergunta}}</td>
  <td>
    <button id="{{ordem}}" class="btn-change-order-up btn btn-primary {{#if first_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-up"></i>
    </button>
    <button id="{{ordem}}" class="btn-change-order-down btn btn-info {{#if last_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-down"></i>
    </button>
  </td>
</tr>

你会将其渲染为:

template({
  ordem: ordem,
  prev_ordem: data.var_pergunta[ordem - 1]
  first_ordem: ordem === 1,
  last_ordem: order === data.var_pergunta.length
});