2

Tenho este código:

db.transaction (function (tx) {
            tx.executeSql(`SELECT * FROM cartoes WHERE usuario = ${0}`, [], function(tx, results){
                for(var i=0; i<results.rows.length; i++) {
                    var nomeEmpresa = results.rows.item(i).empresa;
                    var nome = results.rows.item(i).nome;
                    var id = results.rows.item(i).id;
                    var d = new Date();
                    var capa = results.rows.item(i).img2 + '?time=' + d.getTime();

                    $(".listagem-cartoes").append(
                        `<div style="width: 100%; overflow-x: hidden;">
                            <div class="cartoes">
                                <div class="item-total">
                                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                                        <div class="card-panel grey lighten-5 z-depth-1">
                                            <div class="row valign-wrapper foto" id = ${id}>
                                                <div class="col s3 lista-cartoneira editar-cartao" style="padding-left: 0px;">
                                                    <img src="${results.rows.item(i).img2 + '?time=' + d.getTime()}" alt="" class="circle responsive-img foto" id=${id}> 
                                                </div>
                                                <div class="col s9 lista-cartoneira">
                                                    <h1>${nomeEmpresa}</h1>
                                                    <h2>${nome}</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                                    <div class="card-panel grey lighten-5 z-depth-1">
                                        <div class="row valign-wrapper botoes">
                                            <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                                <i class="material-icons telefone" id=${id}>phone</i>
                                            </div>
                                            <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                                <i class="material-icons email" id=${id}>email</i>
                                            </div>
                                            <div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} style="background-color: #757575;">
                                                <i class="material-icons localizacao" id=${id}>place</i>
                                            </div>
                                            <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                                <i class="material-icons compartilhar" id=${id}>open_in_new</i>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>`
                    );
                }
            });
        });

Este código tem como função listar todos os cartões do usuário.

Visualmente fica assim: inserir a descrição da imagem aqui

(o segundo ficou daquela maneira pq não tem imagem).

O que eu quero fazer é o seguinte..

Tenho no meu banco, também, a tabela de endereços. Nenhum cartão é obrigado a ter endereço. Se não tiver, eu quero remover o botão de localização(endereço) SOMENTE no cartão que não tem endereço, logo, ficaria assim:

inserir a descrição da imagem aqui

Para fazer isso, eu faço uma consulta no banco e verifico quais cartões não tem endereço:

db.transaction (function (tx) {
  tx.executeSql(`SELECT * FROM enderecos WHERE cartao = ${id}`, [], function(tx, results){
      for(var i=0; i<results.rows.length; i++) {
          var endereço = results.rows.item(i).endereco;

          if(endereco == ""){
          //AQUI É ONDE MORA O PROBLEMA. EU QUERO ESCONDER/REMOVER O BOTÃO SOMENTE NO CARTÃO QUE NÃO TEM ENDEREÇO. COMO PODERIA FAZER ISSO?
          }
      }
   });
});

No último código é onde mora o problema... Quero esconder o botão somente no cartão que não tem endereço. Como poderia fazer isso?

Essa é a div que foi inserida através do append que preciso esconder/remover:

<div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} style="background-color: #757575;">
                                                    <i class="material-icons localizacao" id=${id}>place</i>

1 Resposta 1

0

Pode usar um operador ternário dentro do template string com a parte do botão em questão:

<div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
   <div class="card-panel grey lighten-5 z-depth-1">
       <div class="row valign-wrapper botoes">
           <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
               <i class="material-icons telefone" id=${id}>phone</i>
           </div>
           <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
               <i class="material-icons email" id=${id}>email</i>
           </div>
           ${endereco ?
           `<div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} style="background-color: #757575;">
               <i class="material-icons localizacao" id=${id}>place</i>
           </div>`
           : ``}
           <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
               <i class="material-icons compartilhar" id=${id}>open_in_new</i>
           </div>
       </div>
   </div>
</div> 

Veja no exemplo abaixo que o endereço em "emp2" está vazio e não é mostrada a referida div "place":

results = [
   { empresa: "emp1", nome: "nome1", id: "id1", img2: "im2", endereco: "end1" },
   { empresa: "emp2", nome: "nome2", id: "id2", img2: "im2", endereco: "" },
   { empresa: "emp3", nome: "nome3", id: "id3", img2: "im3", endereco: "end3" }
];

 for(var i=0; i<results.length; i++) {
     var endereco = results[i].endereco;
     var nomeEmpresa = results[i].empresa;
     var nome = results[i].nome;
     var id = results[i].id;
     var d = new Date();
     var capa = results[i].img2 + '?time=' + d.getTime();

     $(".listagem-cartoes").append(
         `<div style="width: 100%; overflow-x: hidden;">
             <div class="cartoes">
                 <div class="item-total">
                     <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                         <div class="card-panel grey lighten-5 z-depth-1">
                             <div class="row valign-wrapper foto" id = ${id}>
                                 <div class="col s3 lista-cartoneira editar-cartao" style="padding-left: 0px;">
                                     <img src="${results[i].img2 + '?time=' + d.getTime()}" alt="" class="circle responsive-img foto" id=${id}> 
                                 </div>
                                 <div class="col s9 lista-cartoneira">
                                     <h1>${nomeEmpresa}</h1>
                                     <h2>${nome}</h2>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                     <div class="card-panel grey lighten-5 z-depth-1">
                         <div class="row valign-wrapper botoes">
                             <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                 <i class="material-icons telefone" id=${id}>phone</i>
                             </div>
                             <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                 <i class="material-icons email" id=${id}>email</i>
                             </div>
                             ${endereco ?
                             `<div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} style="background-color: #757575;">
                                 <i class="material-icons localizacao" id=${id}>place</i>
                             </div>`
                             : ``}
                             <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                 <i class="material-icons compartilhar" id=${id}>open_in_new</i>
                             </div>
                         </div>
                     </div>
                 </div> 
             </div>
         </div>`
     );
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listagem-cartoes"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .