將 javascript if 語句插入 html

Question

在一個 javascript 文件中，我目前將一些 HTML 保存到一個變量中。 但是我只想在一個條件下顯示 HTML 的中間部分。 查看if code.length == 1 。

var html = `<div class="flex justify-between p-3 border-b border-blue-200" id=${this.id}><div> <h5 class="font-bold text-blue-700 text-sm mb-1 pr-2"> ${Name}</h5> <p class="text-sm text-blue-500"> if (Code.length == 1) { <span class="font-semibold mr-1"><%= t("common.code") %></span> <span>  </span> } </p></div></div>`

但是我似乎無法讓這個工作。 這可能嗎？

Answer 1

那條線太長而無法維護。 打破它，這樣你就可以看到發生了什么。

var html = `<div class="flex justify-between p-3 border-b border-blue-200" id=${this.id}><div> <h5 class="font-bold text-blue-700 text-sm mb-1 pr-2"> ${Name}</h5> <p class="text-sm text-blue-500">`;

if (Code.length == 1) {
  html += `<span class="font-semibold mr-1"><%= t("common.code") %></span> <span>  </span>`;
}

html += `</p></div></div>`

Answer 2

使用變量

在您的 HTML 片段中，您已經在使用變量。 為什么不通過使內容成為變量來堅持這一點。 請參閱下面的代碼段，其中使用變量content添加值作為示例。

這部分似乎在服務器端准備好了： <%= t("common.code") %> 。 我假設你知道自己該怎么做。

 let Code = 'K'; let id = '5'; // this.id; let Name = 'Herring'; var content = Code.length == 1 ? `<span class="font-semibold mr-1"><%= t("common.code") %></span>` : ''; var html = `<div class="flex justify-between p-3 border-b border-blue-200" id="${id}"><div> <h5 class="font-bold text-blue-700 text-sm mb-1 pr-2">${Name}</h5> <p class="text-sm text-blue-500">${content}</p> </div></div>`; console.log(html);