HTML Como ocultar uma informação sobre um imóvel, dependendo da categoria.

[victorvmribeiro]

Boa Tarde galera, estou com um problema em um site. 

O que ocorre é o seguinte,  quando eu faço uma busca, em alguns tipos de imóveis não há 'quartos,banheiros..'. 

Estou tentando ocultar essas informações apenas em alguns tipos de imóveis como 'garagem, lote, terreno' e deixar apenas a informação de 'metragem'.

 

<!-- BUSCA DE IMOVEIS -->
<div class="col-xs-12 boxBusca panel panel-default">
    <div class="panel-heading" style="margin-bottom: 5px;background:#652d91;color:#ffffff">
        Busca avançada
    </div>
    <div class="panel-body">
            <select id="qtdeQuartos" class="form-control" style="margin-bottom: 10px">
                <option value="">Quantidade de quartos</option>
                {section name=q loop=$quartos}
                {if $quartos[q]}
                  <option value="{$quartos[q]}"{if $qrt == $quartos[q]}selected="selected"{/if}>{$quartos[q]}</option>
                  {/if}
               {/section}
            </select>
            <select id="categoria" class="form-control" style="margin-bottom: 10px">
                <option value="">Tipo de imóvel</option>
                {section name=t loop=$idCategoria}
                    <option value="{$idCategoria[t]}" {if $ctg == $idCategoria[t]}selected="selected"{/if}>{$nomeCategoria[t]}</option>
                {/section}
            </select>
            <select id="garagem" class="form-control" style="margin-bottom: 10px">
                <option value="">Vagas de garagem</option>
                {section name=v loop=$vagas}
                {if $vagas[v]}
                  <option value="{$vagas[v]}" {if $grg == $vagas[v]}selected="selected"{/if}>{$vagas[v]}</option>
                  {/if}
               {/section}
            </select>
            <select id="finalidade" class="form-control" style="margin-bottom: 10px">
                <option value="">Finalidade</option>
                <option value="1" {if $fin == 1}selected="selected"{/if}>Residencial</option> 
                <option value="2" {if $fin == 2}selected="selected"{/if}>Comercial</option>
            </select>
            <input type="text" id="codigo" placeholder="Código do imóvel" value="{$cod}" class="form-control" />
    </div>
    <div class="panel-footer" style="text-align: right">
        {if $filtrado}
        <button class="btn btn-warning" onclick="removerFiltros('{$categoria}');">LIMPAR</button>
        {/if}
        <button class="btn btn-custom" onclick="javascript:filtrarImoveis('{$categoria}');">BUSCAR</button>
    </div>
</div>
<!-- end busca imoveis -->

<div class="info col-xs-12">
    <div style="font-size:20px;color:#333333;font-weight: bold;border-left:6px solid #652d91;padding-left:10px;margin-top:10px">{$imovelTitulo[c]}</div>
    <div style="margin-top:10px">{$imovelDescricao[c]}</div>
    <div class="pins" style="margin-top:10px"> • {$imovelArea[c]}m² • {$imovelQuartos[c]} quartos • {$imovelBanheiros[c]} banheiros </div>
</div>

 

[Public2004]

@victorvmribeiro Boa noite amigo e seja bem-vindo. Quanto a sua dúvida, acredito que com uma simples condição possa chegar ao resultado pretendido. Quando for apresentar os dados na tela, faça a condição comparativa, se registro for igual a "a,b ou c", oculta os campos desejados. Para ocultar pode fazer: Condição individual; Associar a uma variável; Definir uma regra css e aplicar a classe para os elementos (display block or none) enfim, o que for melhor para o seu projeto.

 

Att.

[DiF]

@victorvmribeiro

Creio que você possa resolver isso com uma condicional IF e adicionando um elemento para os que quer esconder.

 

Algo assim:

<div class="pins" style="margin-top:10px"> • 
  {$imovelArea[c]}m² • 
     if ($imovelQuartos[c] == 0):
         <span class='esconde'>{$imovelQuartos[c]} quartos</span> •
     else:
         <span>{$imovelQuartos[c]} quartos</span> •
     endif;
   
     if ($imovelBanheiros[c] == 0 ):
          <span class='esconde'>{$imovelBanheiros[c]} banheiros</span> 
     else:
          <span>{$imovelBanheiros[c]} banheiros</span> 
     endif;
  
</div>

Claro que isso é só um exemplo.. não copie e cole.

 

PS: Também podes usar o jQuery e esconder Exemplo:

 

<div class='pins'>
 <span class='area'>2500m² •</span>
 <span class='tag quarto-tag'><span class='quarto'>0</span> Quarto(s) •</span>
 <span class='tag banheiro-tag'><span class='banheiro'>0</span> Banheiro(s)</span>
</div>

jQuery

$(document).ready(function(){
    //variáveis que pega o valor do span.quarto e span.banheiro
    var quarto =  $('.tag span.quarto').text();
    var banheiro =  $('.tag span.banheiro').text();
    
    //testa se for zero quartos esconde a tag de quartos
    //testa se for zero banheiros esconde a tag de banheiros
    (quarto == 0) ? $('.quarto-tag').css({'display':'none'}) : '';
    (banheiro == 0) ? $('.banheiro-tag').css({'display':'none'}) : '';

});

Veja funcionando: https://jsfiddle.net/dife/w70bprmn/26/  (altere a quantidade de quarto e banheiro para zero e clique em "run")

 

A razão por ter feito dois "ifs"  é porque.. pode existir uma garagem com banheiro. 

Minha casa por exemplo, tem um banheiro na garagem.

 

[victorvmribeiro]

@Public2004 @DiF Muito obrigado, está é a primeira vez que utilizo o fórum e as informações me ajudam muito. Vou por em prática aqui. 

 

[DiF]

@victorvmribeiro Reveja minha resposta acima, incrementei com outra ideia de esconder os elementos via jQuery, assim você não precisa mexer no back-end.

[victorvmribeiro]

@DiF Nossa cara perfeito, muito obrigado. Era exatamente isso que precisava.

[victorvmribeiro]

Fala galera, beleza?
Estou com uma dúvida aqui. O que acontece é o seguinte, não sei como posso fazer para que uma div ocupe a posição da anterior caso ela não esteja visível.

Pois o site que estou fazendo é para uma imobiliária e tem alguns imóveis que não possuem banheiro, ou garagem. Então coloquei um if pra ocultar caso o valor seja inferior a 0. 

<div class="row informacoesImovel dadosImovel text-center col-12">
                <div class="col-2" style="padding: 0px; color: #002640">
                  {if $imovelQuartos[c] >= 1}<img src="{$okewServiceURL}/{$template}/img/bed.png"><br />{$imovelQuartos[c]}{/if}
                </div>
                <div class="col-2" style="padding: 0px; color: #002640">
                  {if $imovelGaragem[c] >= 1}<img src="{$okewServiceURL}/{$template}/img/car.png"><br /> {$imovelGaragem[c]}{/if}
                </div>
                <div class="col-2" style="padding: 0px; color: #002640">
                  {if $imovelBanheiros[c] >= 1}<img src="{$okewServiceURL}/{$template}/img/bath.png"><br /> {$imovelBanheiros[c]}{/if}
                </div>
                <div class="col-2" style="color: #002640">
                  {if $imovelMetragem[c] >= 1}<img src="{$okewServiceURL}/{$template}/img/area.png"><br /> {$imovelMetragem[c]} m²{/if}
                </div>
                <div class="col-3 pull-right">
                  <button style="border-radius: 50px; border-style: none; padding: 10px; background:#D2AB4D; color:#002640; font-weight: bold;">DETALHES ></button>
                </div>
              </div>

Segue a imagem ilustrativa de exemplo.