Add or Remove Class from a DIV by clicking

Asked

Viewed 3,134 times

2

Hello guys I’m wanting to make when I press 1x on DIV "packages . PA" it will make the changes:

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

And when I press again he will remove the class .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>

javascript jquery classes

  • Kaique, avoid using inline css and whenever possible create an easy-to-check example, you can use https://jsfiddle.net/

  • hello @Gabrielrodrigues so, this question didn’t have much to sample, so you don’t need jsfiddle.. Eee pq not use inline? I use the display: inline:block only because I think it better than using the float

3 answers

5

You can use the method toggleClass() jQuery:

$(".pacotes").click(function() {
  $(this).toggleClass("select");
});

  • you’re not creating class :/

3


It would look like this (left over to class, you don’t see him changing the code HTML, but he adds):

$(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>

When you first click it will hide the Divs PB and PC and assign a class select to div.pacotes, by clicking again it removes this class and displays the div PB (just to see working here).

  • it’s run buddy, but I wanted after I had removed the class, and I pressed it again he added the class again and then successively at each click

  • 1

    He adds the class again friend, so I even put to also display the div.bottaaoPB, for you to see that he is taking and putting the class. Anything reload that page because I had forgotten the contado = 0; and so was not putting the class again.

  • 1

    yes now it was obliged :)

  • I in the case made 3 PA packages , PB and PC. how do I make sure that if one package has selected and I press another one it disables that package and activates the other? type in my case, PA ta active, and I press on PB it activates PB and disables PA

  • Well, in case each package would be a div? Just click them to see if there is class in the others (with hasClass) and with it remove the class select of the others. Try to take from this comment, if I could not publish another question with the doubt that I other members will answer.

  • 1

    ok I’ll try thanks.

Show 1 more comment

2

Try changing to : 

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

With pure JS.

Browser other questions tagged javascript jquery classes

You are not signed in. Login or sign up in order to post.