title: Using JQuery To Switch Between Icon Classes
body: <p>I am trying to use a bit of JQuery / Javascript to switch between Icons I am using for table sorting. I can hide all i elements but am having a bit of trouble specifically targeting the class to hide/show. </p>
  
  <p><strong>For example these are my table headings in HTML</strong></p>
  
  <pre><code>  &lt;th&gt;Order No &amp;nbsp; &lt;i id='col1' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
    &lt;th&gt;Cust Name &amp;nbsp; &lt;i id='col2' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
    &lt;th&gt;Cust ID &amp;nbsp; &lt;i id='col3' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
    &lt;th&gt;Doc Date &amp;nbsp; &lt;i id='col4' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
    &lt;th&gt;Upload Date &amp;nbsp; &lt;i id='col5' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
    &lt;th&gt;Path&lt;/th&gt;
  </code></pre>
  
  <p>What I would like to do specifically is target the element id e.g col1 etc. And then ONLY switch the class name on click between these 3 classes depending on which class is showing at the time.</p>
  
  <p>This is a typical example : </p>
  
  <pre><code>&lt;th&gt;Order No &lt;i id='col1' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
  </code></pre>
  
  <p>I will typically be switching between the following three classes.</p>
  
  <ul>
  <li>fa fa-sort</li>
  <li>fa fa-sort-asc</li>
  <li>fa fa-sort-desc</li>
  </ul>
  
  <p><strong>SCRIPT</strong>
  Any tutorials I have found seem to only target the element id. I have tried something like this but It doesn't work. Any guidance on this would be greatly appreciated.</p>
  
  <pre><code>    $(document).ready(function(){
  
          $("#col1").click(function(){
              $(".fa fa-sort").hide();
              $(".fa fa-sort-asc").show();
          });
  
          $("#col2").click(function(){
             $(".fa fa-sort-asc").hide();
             $(".fa fa-sort-desc").show();
          });
  
          $("#col3").click(function(){
              $(".fa fa-sort-desc").hide();
              $(".fa fa-sort").show();
          });
  
      });
  </code></pre>
  
  <p>After seeing G's suggestion I did make the code change however it does not appear to be working. I will add the test page code, please excuse any formatting bugs.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;TEST&lt;/title&gt;
  &lt;!-- CSS --&gt;
      &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
  
  &lt;!-- JQuery --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  
  table
  {
      width: 90%;
      margin: auto;margin-top: 20px;
  
      border-spacing: 0;
      border-collapse: collapse;
  
      border: 1px solid #a0a0a0; 
      border-radius: 25px;
      background-color: transparent;
  }
  .table
  {
      width: 90%;
      margin-right: 5%;
      margin-bottom: 20px;
      margin-left: 5%;
  }
  
  
  th
  {
      padding: 10px;color: #fff; 
      background-color: #003466; 
  }
  
  #col1, #col2, #col3, #col4, #col5
  {
      cursor:pointer;
  }
  
  
  tr
  {
      padding: 10px;
  }
  tr:nth-child(odd)
  {
      background-color: #fff;
  }
  tr:nth-child(even)
  {
      background-color: #efefef;
  }
  td
  {
      padding: 10px; text-align: center;
  }
  &lt;/style&gt;
  &lt;script&gt;
  $("#col1").click(function() {
    if($(this).hasClass('fa-sort')){
     $(this).removeClass('fa-sort').addClass('fa-sort-asc');
       return;
    }
    if($(this).hasClass('fa-sort-asc')){
     $(this).removeClass('fa-sort-asc').addClass('fa-sort-desc');
       return;
    }
    if($(this).hasClass('fa-sort-desc')){
     $(this).removeClass('fa-sort-desc').addClass('fa-sort');
       return;
    }
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Order No &amp;nbsp; &lt;i id='col1' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
              &lt;th&gt;Cust Name &amp;nbsp; &lt;i id='col2' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
              &lt;th&gt;Cust ID &amp;nbsp; &lt;i id='col3' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
              &lt;th&gt;Doc Date &amp;nbsp; &lt;i id='col4' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
              &lt;th&gt;Upload Date &amp;nbsp; &lt;i id='col5' class='fa fa-sort'&gt;&lt;/i&gt;&lt;/th&gt;
              &lt;th&gt;Path&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>