Javascript de adicionar e remover class

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Javascript de adicionar e remover class

Mensagem por Connor R. 30.07.20 17:54

Detalhes da questão


Endereço do fórum: https://somosmugiwara.forumeiros.com/
Versão do fórum: ModernBB

Descrição


O código abaixo removia e adicionava uma class ao item clicado. Mas atualmente deixou de funcionar, gostaria de saber qual o problema. Teria como ajustar?

https://jsfiddle.net/8qb2msde/1/

* Note que ao clicar em outra aba a mesma não fica com a class active, esta fica apenas na primeira aba.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Javascript de adicionar e remover class

Mensagem por tikky 30.07.20 18:06

Olá @Connor R.,

Altere o seu código para:
Código:
<div class="dadosdopersonagem">
  <div class="c1 iconedaficha active"></div>
  <div class="c2 iconedaficha"></div>
  <div class="c3 iconedaficha"></div>
</div>
<style>
  .dadosdopersonagem {
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
  height: 86px;
  }
  .iconedaficha:hover,
  .iconedaficha.active {
  opacity: 1;
  }
  .iconedaficha {
  cursor: pointer;
  opacity: .5;
  min-width: 73px;
  margin: 0 2px;
  display: inline-block;
  background: #f00;
  padding: 15px 9px 10px;
  text-align: center;
  }
  .c1:after {
  content: "Dados Básicos";
  }
  .c9:after, .c1:after, .c2:after, .c3:after, .c4:after, .c5:after, .c6:after, .c7:after, .c8:after {
  display: block;
  margin-top: 10px;
  }
  .c2:after {
  content: "Atributos e PvP";
  }
  .c3:after {
  content: "Equip e Armas";
  }
</style>
<script>
  $(document).ready(function() {
  $('.dadosdopersonagem .iconedaficha').click(function() {
 
          $(this).parent().find('.active').removeClass('active'); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
          $(this).addClass('active'); //aqui adicionamos a class ao item clicado
 
          });
  });
</script>


Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Javascript de adicionar e remover class

Mensagem por Connor R. 30.07.20 18:46

Olá @"pedxz" já tentei fazer isto, no caso você alterou para aspas únicas e o find para active, mas o código não funciona ainda, testei abaixo. Também retirou o id.

https://jsfiddle.net/Lqc53o8a/1/
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Javascript de adicionar e remover class

Mensagem por tikky 30.07.20 18:50

É que falta a biblioteca jQuery para que possa funcionar: Veja uma Demonstração
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Javascript de adicionar e remover class

Mensagem por Connor R. 30.07.20 23:00

qual seria a biblioteca? pois não alterei nada e funcionava, talvez a biblioteca que eu usava ficou obsoleta.

* Consegui resolver, havia um conflito de códigos. Thanks.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Javascript de adicionar e remover class

Mensagem por tikky 30.07.20 23:14

Connor R. escreveu:qual seria a biblioteca? pois não alterei nada e funcionava, talvez a biblioteca que eu usava ficou obsoleta.
Se o senhor refere-se: https://jsfiddle.net/Lqc53o8a/1/ na opção "Resources" adicione o seguinte link:
Código:
https://code.jquery.com/jquery-3.5.1.min.js

Caso use uma página HTML no seu fórum sem ("Não") a opção: "Você deseja utilizar o início e o final da página do seu fórum" adicione dentro do <head> da página:
Código:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>



23:17:48
Consegui resolver, havia um conflito de códigos. Thanks.

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos