Skip to main content
se añadieron 980 caracteres en el cuerpo
Origen Enlace
onzinsky
  • 248
  • 1
  • 3

Usando tu ejemplo, loLo podrías solucionar con operadores ternariosOperadores Ternarios.

Usando tu ejemplo:

Usando tu ejemplo, lo podrías solucionar con operadores ternarios:

Lo podrías solucionar con Operadores Ternarios.

Usando tu ejemplo:

se añadieron 980 caracteres en el cuerpo
Origen Enlace
onzinsky
  • 248
  • 1
  • 3

No se pueden poner if ... else ... dentro de Template LiteralsPlantillas Literales

$(td_result).html(`
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${status ? `
                        <div class="d-flex align-items-center">
                        <p class="card-text">Name Example</p>
                        <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                    </div>
                    <p class="card-text">Hitpath | Aff ID</p>
                    <div class="d-flex align-items-center">
                        <p class="card-text mb-0">
                            <span>WhoIs: ${email}</span>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </p>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    </a>`);

Ahora bien, te recomendaría escribir una funcion para aclarar el código.

Te dejo un ejemplo auto-contenido:

var email = "[email protected]";
var status = false;

function ifHasStatusReturnCard(status, email){
    if(status)
        return `
            <div class="d-flex align-items-center">
                <p class="card-text">Name Example</p>
                <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
            </div>
            <p class="card-text">Hitpath | Aff ID</p>
            <div class="d-flex align-items-center">
                <p class="card-text mb-0">
                    <span>WhoIs: ${email}</span>
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </p>
            </div>
            `;
    return '';
}

var str = `
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${ifHasStatusReturnCard(status, email)}
                </div>
            </div>
        </div>
    </a>`

console.log(str);

No se pueden poner if ... else ... dentro de Template Literals

$(td_result).html(`
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${status ? `
                        <div class="d-flex align-items-center">
                        <p class="card-text">Name Example</p>
                        <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                    </div>
                    <p class="card-text">Hitpath | Aff ID</p>
                    <div class="d-flex align-items-center">
                        <p class="card-text mb-0">
                            <span>WhoIs: ${email}</span>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </p>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    </a>`);

No se pueden poner if ... else ... dentro de Plantillas Literales

$(td_result).html(`
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${status ? `
                        <div class="d-flex align-items-center">
                        <p class="card-text">Name Example</p>
                        <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                    </div>
                    <p class="card-text">Hitpath | Aff ID</p>
                    <div class="d-flex align-items-center">
                        <p class="card-text mb-0">
                            <span>WhoIs: ${email}</span>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </p>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    </a>`);

Ahora bien, te recomendaría escribir una funcion para aclarar el código.

Te dejo un ejemplo auto-contenido:

var email = "[email protected]";
var status = false;

function ifHasStatusReturnCard(status, email){
    if(status)
        return `
            <div class="d-flex align-items-center">
                <p class="card-text">Name Example</p>
                <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
            </div>
            <p class="card-text">Hitpath | Aff ID</p>
            <div class="d-flex align-items-center">
                <p class="card-text mb-0">
                    <span>WhoIs: ${email}</span>
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </p>
            </div>
            `;
    return '';
}

var str = `
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${ifHasStatusReturnCard(status, email)}
                </div>
            </div>
        </div>
    </a>`

console.log(str);
Origen Enlace
onzinsky
  • 248
  • 1
  • 3

No se pueden poner if ... else ... dentro de Template Literals

Usando tu ejemplo, lo podrías solucionar con operadores ternarios:

$(td_result).html(`
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${status ? `
                        <div class="d-flex align-items-center">
                        <p class="card-text">Name Example</p>
                        <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                    </div>
                    <p class="card-text">Hitpath | Aff ID</p>
                    <div class="d-flex align-items-center">
                        <p class="card-text mb-0">
                            <span>WhoIs: ${email}</span>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </p>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    </a>`);