如何使用条件语句返回javascript函数中的html代码

Question

我有一个javascript函数，其中返回了html代码。我想在那条return语句中使用if条件。请指导我如何使用它。

这是我的javascript函数：

function abc(param)
{
  var step =2;
  if(n>0){

    return `
        <div>
        **{% if step == '1' %}
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
        {% endif %}**
        </div>
    `;

  }
}

我突出显示了我使用过if语句的地方。这是我的JavaScript文件。

Answer 1

在不同条件下使用不同的字符串：

function abc(param)
{
  var step =2;
  if(n>0){

    return step == '1' ? `
        <div>
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
        </div>
    `:"<div></div>"

  }
}

Answer 2

您可以使用字符串连接。 顺便说一句，我假设n是这里的全局变量。

var n = 1

function abc(param)
{
  var step = 2;
  var innerHtml = '';
  if(n>0){
    if (step == '1') {
      innerHtml = `
          <div class="box" style="background-color:red" id="prodcolor">
           <span style="display:none"> Sample</span>
          </div>
      `;
    }
    return `
        <div>
        ${innerHtml}
        </div>
    `;

  }
}