Javascript de adicionar e remover class

Item: Javascript de adicionar e remover class
Rating: 1

por Don Corleone 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.

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.

por Don Corleone 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/

por **tikky** 30.07.20 18:50

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

por Don Corleone 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.

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".

Javascript de adicionar e remover class