2

Olá galera estou querendo fazer com que quando eu aperto 1x na DIV "pacotes .PA" ela vai fazer as alterações:

  • adicionar classe .select
  • CSS: #bottaaoPA: Display:Block ;
  • CSS: bottaaoPB: Display:None;
  • CSS: bottaaoPC: Display:None;

E quando eu aperta novamente ele vai remover a classe .select

<div class="pacotes pa">
    <h1> PACOTE COMPLETO</h1>
    <h2 style="display:inline-block;margin-right:5px;">R$<b>2.500,</b></h2>
    <h6 style="display:inline-block;">00</h6>
    <div class="bloco-loja">
        <h1>Transfer</h1>
        <h2>(participante + bike)</h2>
        <h3>Vitória x Itaúnas<br> Praia das Neves x Vitória</h3>
    </div>
    <div class="bloco-loja">
        <h1 style="margin-bottom:5px;">Pousada/Hotel</h1>
        <h3>09 diárias c/ café da manhã</h3>
    </div>
    <div class="bloco-loja">
        <h1>Carro de Apoio <br> e de Bagagem</h1>
    </div>
    <div class="bloco-loja">
        <h1>Kit Evento</h1>
        <h2 style="margin-top:10px;">Camisa Ciclista + Medalha de <br> Conclusão da Expedição + <br> Adesivo do Evento</h2>
    </div>
    <div class="bloco-loja">
        <h1>Seguro</h1>
    </div>
</div>
<div id="bottaaoPA">Comprar</div>

2
  • Kaique, evite usar css inline e sempre que possivel crie um exemplo de fácil verificação, você pode utilizar o jsfiddle.net 25/01/2016 às 17:01
  • olá @GabrielRodrigues então, essa pergunta não tinha muito oque se amostrar, então não precisa do jsfiddle.. eee pq não usar o inline? eu uso o display: inline:block apenas pois axo ele melhor do que usar o float
    – kaiquemix
    25/01/2016 às 17:05

3 Respostas 3

5

Pode utilizar o método toggleClass() do jQuery:

$(".pacotes").click(function() {
  $(this).toggleClass("select");
});
1
  • não ta criando classe não :/
    – kaiquemix
    25/01/2016 às 16:42
3

Ficaria assim (sobra a class, você não vê ele alterando no código HTML, mas ele adiciona):

$(function(){
  var contador = 0;

  $('.pacotes').click(function(){

    if(contador === 0)
    {
      $(this).addClass("select");
      $("#bottaaoPA").css("display","block");
      $("#bottaaoPB").css("display","none");
      $("#bottaaoPC").css("display","none");
      contador = 1;
    }
    else
    {
      $(this).removeClass("select");
      $("#bottaaoPB").css("display","block"); //apenas para teste
      contador = 0;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pacotes pa">
	<h1> PACOTE COMPLETO</h1>
	<h2 style="display:inline-block;margin-right:5px;">R$<b>2.500,</b></h2><h6 style="display:inline-block;">00</h6>
	
	<div class="bloco-loja">
	   <h1>Transfer</h1> 
	   <h2>(participante + bike)</h2> 
	   <h3>Vitória x Itaúnas<br> Praia das Neves x Vitória</h3>
	</div>
	
	<div class="bloco-loja">
	   <h1 style="margin-bottom:5px;">Pousada/Hotel</h1> 
	   <h3>09 diárias c/ café da manhã</h3>
	</div>
	
	<div class="bloco-loja">
	   <h1>Carro de Apoio <br> e de Bagagem</h1> 
	</div>
	
	<div class="bloco-loja">
	   <h1>Kit Evento</h1> 
	   <h2 style="margin-top:10px;">Camisa Ciclista + Medalha de <br> Conclusão da Expedição + <br> Adesivo do Evento</h2> 
	</div>
	
	<div class="bloco-loja">
	   <h1>Seguro</h1> 
	</div>
</div>

<div id="bottaaoPA">ComprarPA</div>
<div id="bottaaoPB">ComprarPB</div>
<div id="bottaaoPC">ComprarPC</div>

Ao clicar pela primeira vez ele vai ocultar as divs PB e PC e atribuir uma classe select a div.pacotes, ao clicar novamente ele ele remove essa class e exibe a div PB (apenas para ver funcionando aqui).

6
  • é funciono amigo, mas queria que depois de ter retirado a classe, e eu apertasse de novo ele adicionasse a classe novamente e por ae sucessivamente a cada click
    – kaiquemix
    25/01/2016 às 16:49
  • 1
    Ele adiciona a classe novamente amigo, por isso mesmo coloquei para também exibir a div.bottaaoPB, para você ver que ele ta tirando e colocando a classe. Qualquer coisa recarregue essa página, pois eu tinha esquecido do contado = 0; e por isso não estava colocando a classe novamente.
    – Leonardo
    25/01/2016 às 16:52
  • 1
    sim agora foi obrigado :)
    – kaiquemix
    25/01/2016 às 17:04
  • eu no caso fiz 3 pacotes PA , PB e PC. como faço para que se um pacote tiver selecionado e eu aperto em outro ele desativa esse pacote e ativa o outro? tipo no meu caso, o PA ta ativo, ae eu aperto no PB ele ativa o PB e desativa o PA
    – kaiquemix
    25/01/2016 às 17:21
  • 1
    ok irei tentar obrigado.
    – kaiquemix
    25/01/2016 às 17:53
2

Tente alterar para :

<div id="bottaaoPA" onclick="if(this.hasClassName('select')){ this.className = ''}else{ this.className = 'select' };">ComprarPA</div>

Com JS puro.

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 .