2

Então, estou tentando fazer aqueles headers responsivos que, quando clicados, organizam a coluna e mudam a "setinha" para cima ou para baixo. Atualmente já tenho os meus sorts funcionando, mas ainda falta essa "responsividade" dos icones.

Então meu problema é:

Tenho o icone atual: fa fa-fw fa-sort = inserir a descrição da imagem aqui

Gostaria que, quando um 'X' header for clicado, o icone mude para: fa fa-fw fa-sort-down= inserir a descrição da imagem aqui

Como faço para mudar ícones através de cliques? Além disso, é possível pegar o clique no header:

<th id="teste" rowspan="2" style="text-align: center; vertical-align: middle">Cliente   <i class="fa fa-fw fa-sort"></i></th>

E, quando algum outro for clicado, esse respectivo volte para o ícone original?

5
  • Dá uma olhada nessa pergunta [ pt.stackoverflow.com/questions/105227/… ], é sobre trocar a classe de um elemento, talvez te sirva.
    – Fabricio
    Commented 12/07/2018 às 14:58
  • Mas, o que vc quer fazer realmente? Vc diz no título da pergunta Font-awesome icon responsivo e no texto da pergunta mas ainda falta essa "responsividade" dos icones.. Vc quer a troca dos ícones com um clique ou quer que quando a tela tenha determinada resolução troque o ícone?
    – LeAndrade
    Commented 12/07/2018 às 15:11
  • Só um OBS, no caso da sua última frase da pergunta não basta Voltar para o ícone anterior, vc teria que voltar o ícone e voltar o Sort da tabela também, se não não faria sentido vc voltar só o ícone e não voltar a ordenação da coluna também...
    – hugocsl
    Commented 12/07/2018 às 15:37
  • Tem que ser só com JavaScript ou pode usar jQuery?
    – hugocsl
    Commented 12/07/2018 às 15:37
  • Responde as perguntas: Fabricio: Serviu pra ter uma ideia, já estou mais direcionado agora. Obrigado! LeAndrade: Com "responsividade" eu quero dizer que o ícone seja interativo. Quando eu clicar, quero que ele mude para "\/" e "/\", que vai corresponder com a ordenação da coluna. Hugocsl: Entendi, imaginei que teria que trocar de volta. E respondendo a sua pergunta: pode ser de qualquer maneira na verdade (hahaha), em uma primeira aproximação eu só quero que funcione mesmo.
    – David
    Commented 12/07/2018 às 17:13

2 Respostas 2

1

Só para complementar a resposta do Thales Chemenian. Adicionei uma verificação para, quando um outro header for clicado, o ícone do header anterior voltar para o ícone inicial ("fa fa-fw fa-sort").

var current_icon = ""; // guarda icone para teste
    $(document).on("click",".sort-arrows",
                function() {

                    // get Click
                    var clicked_icon = $(this).attr("id");
                    var clicked_aux = document.getElementById(clicked_icon);

                    // verifica se header mudou
                    if (clicked_aux != current_icon) {

                        // Verifica classe que ficou para "zerar"
                        if ($(current_icon).find("i").hasClass("fa fa-fw fa-sort-up")) {

                            $(current_icon).find("i").removeClass("fa fa-fw fa-sort-up").addClass("fa fa-fw fa-sort");

                        } else if ($(current_icon).find("i").hasClass("fa fa-fw fa-sort-down")) {

                            $(current_icon).find("i").removeClass("fa fa-fw fa-sort-down").addClass("fa fa-fw fa-sort");                
                        }   

                        // Muda o novo header para 'up'
                        $(this).find("i").removeClass("fa fa-fw fa-sort").addClass("fa fa-fw fa-sort-up");

                        // atualiza header atual
                        current_icon = clicked_aux;

                    }

                    // Continua no mesmo Header - Muda para /\ e \/
                    else {

                        alert("Continua no mesmo... " + "Clicked:"+ clicked_icon + " | Current: " + current_icon);

                        if ($(this).find("i").hasClass("fa fa-fw fa-sort")) {
                            $(this).find("i").removeClass("fa fa-fw fa-sort").addClass("fa fa-fw fa-sort-up");

                        } else if ($(this).find("i").hasClass("fa fa-fw fa-sort-up")) {
                            $(this).find("i").removeClass("fa fa-fw fa-sort-up").addClass("fa fa-fw fa-sort-down");

                        } else {
                            $(this).find("i").removeClass("fa fa-fw fa-sort-down").addClass("fa fa-fw fa-sort-up");
                        }
                    }
                });
0

Você pode fazer com jquery utilizando a função click:

Dentro do pageload jQuery

$("#teste").click(function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});

Fora do pageload jQuery

$(document).on("click", "#teste", function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});

Nesta ultima forma, sugiro trocar o contexto document(DOM) pelo container onde recebera o click.

Segue teste funcionando:

$(document).on("click", "#teste", function(){
    if($(this).find("i").hasClass("fa-sort")){
        $(this).find("i").removeClass("fa-sort").addClass("fa-sort-down");
    }else if($(this).find("i").hasClass("fa-sort-down")){
        $(this).find("i").removeClass("fa-sort-down").addClass("fa-sort-up");
    }else{
        $(this).find("i").removeClass("fa-sort-up").addClass("fa-sort-down");
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
	<th id="teste" rowspan="2" style="text-align: center; vertical-align: middle">Cliente   <i class="fa fa-fw fa-sort"></i></th>
  </tr>
  </thead>
</table>

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 .