3

Pode parecer simples essa pergunta, mas não consigo encontrar uma resposta de qualidade. Tenho um ícone de seta e quando clicar nela, quero que ela rode 180 graus. O código que comecei a usar foi esse:

$('.arrow').click(function() {
      $('.rodar').toggleClass('rodado');
  });
.rodado{
     transform:rotate(180deg);
     transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>
<br>
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>

Mas como podem ver no exemplo, se clico em uma, as duas rodam. O this não funciona. Tem como fazer isso de alguma forma?

2 Respostas 2

3

Note que nessa linha você está aplicando o efeito em todos os elementos que possuem a classe rodar:

$('.rodar').toggleClass('rodado');

Para pegar apenas o elemento que foi clicado, use o $(this).

$('.arrow').click(function() {
      $(this).toggleClass('rodado');
  });
.rodado{
     transform:rotate(180deg);
     transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>
<br>
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>

4
  • Obrigado! Estranho é que tentei usar o this, mas não funcionou... deve ter sido algum problema de cache, agora funcionou direitinho, obrigado! Commented 21/09/2018 às 13:54
  • Ou você usou this ao invés de transformá-lo em um objeto jquery, assim $(this) Commented 21/09/2018 às 13:55
  • Você foi mais rápido. hahaha Commented 21/09/2018 às 13:56
  • @fernandosavio sua resposta também ficou bem elaborada. +1 Commented 21/09/2018 às 13:57
3

O método jQuery.toggleClass pertence apenas à biblioteca jQuery, o método Element.classList.toggle seria o equivalente JS nativo.

Então, ou você converte o this para um objeto jQuery usando o código:

$(this).toggleClass("rodado");

Ou você usa o elemento nativo usando:

this.classList.toggle("rodado");

Apenas verifique a compatibilidade com os navegadores.

$('.arrow').click(function() {
    $(this).toggleClass('rodado');
    // ou
    // this.classList.toggle('rodado')
});
.rodado{
     transform:rotate(180deg);
     transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>
<br>
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>

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 .