es6/template-literals 中的 if else 语句与数组

Question

我有一个 es6 语句（反引号），我希望 if else 检查条件。我尝试在循环外执行 if else 但它不起作用。

    $(document).ready(function() {
   

   RECORDS_type3.forEach((record, index) => {
        $('#predictionHistory table tbody').append(`<tr class="br-record-row type3">
                 <td><div>${record.predictionTeamOne} <br>VS<br>  ${record.predictionTeamTwo}</div></td>
                  <td>${record.date}</td>
                 <td><div class="bet-brand">${record.betTeam}</div> <span>${record.productCat}</span><div class="betStatus-${record.betStatusType}">${record.betResult}</div></td>
              /* i want do if else statement to show different div
                 if((record.matchCountDown)>0){
                    <td class="wh-countdown">${record.matchCountDown}</td>

                }
                else{
                    <td class="wh-${record.inOut}">${record.amount}</td>

                }*/ this part
            

                 </tr>`);
    });
    
});

我正在使用数组

var RECORDS_type3 = [{
        predictionTeamOne: 'England',
        predictionTeamTwo: 'Austria',
        date: '13 June 2021 9:00PM',
       countdown:"03:00:00"
       ..etc
       
    },

所以我想检查 countdown="00:00:00" 然后我将执行 if else 语句

Answer 1

您可以连接使用模板文字制作的 HTML 字符串的一些块。

RECORDS_type3.forEach((record, index) => {

  let htmlToAppend = `<tr class="br-record-row type3">
    <td><div>${record.predictionTeamOne} <br>VS<br>  ${record.predictionTeamTwo}</div></td>
    <td>${record.date}</td>
    <td><div class="bet-brand">${record.betTeam}</div> <span>${record.productCat}</span><div class="betStatus-${record.betStatusType}">${record.betResult}</div></td>`;
    
    /* Your condition here */
    if((record.matchCountDown)>0){
      htmlToAppend += `<td class="wh-countdown">${record.matchCountDown}</td>`;
    }
    else{
      htmlToAppend += `<td class="wh-${record.inOut}">${record.amount}</td>`
    }

    htmlToAppend += `</tr>`;

  $('#predictionHistory table tbody').append(htmlToAppend);
});

es6/template-literals 中的 if else 语句与数组

if else statement in es6/template-literals with array

jquery

template-literals