CODEWITHSUNDEEP
javascriptjquery
user1651888
user1651888

Reputation: 463

How to toggle between 2 icons

I have to toggle between two icons based on some criteria. How do I do this in jQuery?

<a href='' id="home" onclick="myfunction(this)" data-toggle="toggle">
    <span class="fa fa-train"></span>
</a>

myfunction($this) {
    // ...

    if ($($this).hasClass("fa fa-train")) {
        $($this).removeClass("fa fa-train");
        $($this).addClass("fa fa-car");
    }
    else {
        $($this).addClass("fa fa-car");
        $($this).addClass("fa fa-train");
    }

    // ...
}

Upvotes: 0

Views: 3437

Answers (6)

Visal
Visal

Reputation: 477

This is a concept that I came with which is a bit logical. Instead of using complicated language, what this does is it hides the add button and makes a times button while showing the message that was hidden. It is fairly simple JQuery. 

$(document).ready(function() {
  $("#addCross").click(function() {
    document.getElementById("addCross").style.display = "none";
    document.getElementById("addAdd").style.display = "inline-block";
    document.getElementById("hello").style.display = "block";
  });
  $("#addAdd").click(function() {
    document.getElementById("addCross").style.display = "inline-block";
    document.getElementById("addAdd").style.display = "none";
    document.getElementById("hello").style.display = "none";
  });
});
/* 
   Unoptional CSS 
   Just to make the buttons look better in the snippet. 
*/

button {
  background: transparent;
  border: none;
}

button:focus {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9b271ce18a.js" crossorigin="anonymous"></script>
<div>
  <label>Press the Button: </label>
  <button id="addCross"><i class="fas fa-plus"></i>
  <button id="addAdd" style="display: none;"><i class="fas fa-times"></i></button>
  <div style="display: none;" id="hello">
    <p>Hello. I was hidden by the Magic of JQuery.</p>

    <label>This design also makes a cool rotating add sign if you look closely. Ha Ha!!</label>
  </div>

Upvotes: 0

user1651888
user1651888

Reputation: 463

Thanks everyone, yes i had to search for 'span' and add toggle class. hasClass is also good way to check beforehand that the class exist or not.

Upvotes: 0

Pho3nixHun
Pho3nixHun

Reputation: 828

With a condition in one line:

$($this)
  .addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
  .removeClass(condition ? 'fa-train': 'fa-car')

Note: This will not work if you "use strict" and of course your code will be less readable.

Upvotes: 0

Manoj Dhiman
Manoj Dhiman

Reputation: 5166

you are using this which will check the a tag if has class . while you should check in the span next to a tag .you should use like this 

myfunction($this) {
    // ...

    if ($($this).next('span').hasClass("fa fa-train")) {
        $($this).next('span').removeClass("fa fa-train");
        $($this).next('span').addClass("fa fa-car");
    }
    else {
        $($this).next('span').addClass("fa fa-car");
        $($this).next('span').addClass("fa fa-train");
    }

    // ...
}

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

clicked anchor element do not have class added, its child span does :

function myfunction($this) {
  $($this).find('span').toggleClass('fa-train fa-car');
}

Upvotes: 1

Saiyam Gambhir
Saiyam Gambhir

Reputation: 536

Do something like this

 $('a#home').on('click', function(){
   var childSpan = $(this).find('span');
   if(childSpan.hasClass('fa-train')){
     childSpan.removeClass('fa-train');
     childSpan.addClass('fa-car');
   }
   else if(childSpan.hasClass('fa-car')){
    childSpan.removeClass('fa-car');
    childSpan.addClass('fa-train');
   }});

Upvotes: 0

Related Questions