2
<span class="col-sm-1 text-center">
    <i class="taskIcon glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapse1"></i>
</span>

$(“.taskIcon”).on(“click”,function (){ 
    $(this).find(“glyphicon”).removeClass(“glyphicon-chevron-down”).addClass(“glyphicon-chevron-up”);
});

Tenho um icon, estou tentando intercalar ele quando o mesmo e clicado, fiz o script acima adicionando a classe que quero mas parece que não pega a classe correta.

Caso alguém possa ajudar agradeço.

1
  • As aspas parecem estar erradas e tente colocar find(".glyphicon"), com o ponto no início, para identificar que é uma classe.
    – Woss
    27/10/2017 às 22:56

1 Resposta 1

1

As aspas que está a colocar são aspas de um editor de texto como o Microsoft Word por exemplo, e não as aspas certas para JavaScript ou qualquer código.

No código o find("glyphicon") que tem é desnecessário pois o click já é feito nesse mesmo elemento, e faltava um . para ser um seletor de classe.

Veja como já funciona acertando esses dois pormenores:

$(".taskIcon").on("click",function (){ 
    $(this).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<span class="col-sm-1 text-center">
    <i class="taskIcon glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapse1"></i>
</span>

Mas se a ideia era alternar a flecha cada vez que clica, então a função toggleClass é mais util, bastando apenas alternar as duas classes de flecha:

$(".taskIcon").on("click",function (){ 
    $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<span class="col-sm-1 text-center">
    <i class="taskIcon glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapse1"></i>
</span>

Documentação para a função toggleClass

1
  • agora entendi mano, valeu mesmo 27/10/2017 às 23:54

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 .