SyntaxError：期望的表達式，得到關鍵字'if' - 解決

Question

我在這裏有一個問題，如果你們可以幫助我，我會很高興。所以我想隱藏一個按鈕「changeOrderUp」，當它位於第一行時，並且想要在最後一行中找到「changeOrderDown」按鈕。但FireBug返回此錯誤：「SyntaxError：預期的表達式，得到關鍵字'如果'」，我無法確定原因。請幫幫我！

這裏是我的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塊。

最重要的是，你不應該使用document.write。它不會爲串聯返回一個字符串，但會擦除文檔並將該字符串寫入頁面。

，就應該替換的

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

的東西每個實例像

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

這將：

1. 比較ordem 1，嚴格（===比==更嚴格）
2. 返回'hide'如果比較是truthy
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 
}); 

Answer 2

嘗試。將您的條件值存儲在一個變量中並打印出來。

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){ 
if(ordem == 1){ var val = document.write('hide'); } 
if(ordem == (data.var_pergunta).length)){ var another = document.write('hide');} 
$('<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 '+val+'" type="button"><i class="fa fa-angle-up"></i></button> \ 
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+another+'" type="button"><i class="fa fa-angle-down"></i></button> \ 
    </td></tr>').insertAfter('.tr-ordem-pergunta'); 
         }