Responsive Font-Awesome icon - How to replace icons when clicked?

Asked

Viewed 757 times

2

So I’m trying to make those responsive headers that, when clicked, organize the column and change the "arrow" up or down. Currently I already have my Sorts working, but still missing this "responsiveness" of icones.

So my problem is:

I have the current icon: fa fa-fw fa-sort = inserir a descrição da imagem aqui

I would like when an 'X' header is clicked, the icon changes to: fa fa-fw fa-sort-down= inserir a descrição da imagem aqui

How do I change icons through clicks? Also, you can click the header:

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

And, when some other is clicked, this respective goes back to the original icon?

javascript html jquery css

  • Take a look at this question [ https://answall.com/questions/105227/trocar-classe-com-javascript-ou-jquery ], it’s about changing the class of an element, maybe it serves you.

  • But, what do you really want to do? You say in the title of the question Font-awesome icon responsive and in the text of the question but this "responsiveness" of the icons is still missing.. You want to change the icons with a click or you want when the screen has a certain resolution to change the icon?

  • Only an OBS, in the case of your last sentence of the question is not enough Go back to the previous icon, you would have to go back to the icon and go back to the table as well, if it would not make sense to just go back to the icon and not go back to the column ordering too...

  • It has to be only with Javascript or you can use jQuery?

  • Answer the questions: Fabricio: It served to have an idea, I’m already more targeted now. Thank you! Leandrade: With "responsiveness" I mean that the icon is interactive. When I click, I want it to change to "/" and "/", which will correspond with column ordering. Hugocsl: I got it, I figured I’d have to switch back. And to answer your question: it may be either way in truth (hahaha), in a first approximation I just want it to work even.

2 answers

1

Just to complement Thales Chemenian’s response. I added a check to, when another header is clicked, return the previous header icon to the initial icon ("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


You can do with jquery using the click function:

Inside the jQuery pageload

$("#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");
    }
});

Outside the jQuery pageload

$(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");
    }
});

In this last form, I suggest changing the context Document(DOM) to the container where the click was received.

Still testing working:

$(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>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.