En un archivo javascript, actualmente tengo algo de HTML guardado en una variable. Sin embargo, solo quiero mostrar la sección central del HTML con una condición. Ver 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>`Sin embargo, parece que no puedo hacer que esto funcione. es posible?
Esa línea es demasiado larga para ser mantenible. Divídelo para que puedas ver lo que está pasando.
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>` En su fragmento de código HTML ya está utilizando variables. ¿Por qué no apegarse a eso haciendo que el contenido sea una variable? Vea el fragmento a continuación con valores agregados como ejemplo usando un content variable.
Esta parte parece preparada en el lado del servidor: <%= t("common.code") %> . Sabes cómo hacerlo tú mismo, supongo.
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);