javascript - Javascript でフォントの素晴らしい表の並べ替えアイコンを変更する

Question

私は自分のプロジェクトのアイコンに素晴らしいフォントを使用しており、とても気に入っています。今、私は自分のテーブルでの並べ替えにアイコンを使用したいと考えています。jQuery のテーブル ソーター プラグインを使用して、それら自体でテーブルを並べ替えています。テーブルは次のようになります。

<table id="myTable" class="tablesorter">
  <thead> 
    <tr>
       <th onclick="changeIcon(this)" class="header headerSortDown">Prod Nr <i class="icon-sort icon-small"></i></th>
       <th onclick="changeIcon(this)" class="header headerSortDown">Name <i class="icon-sort icon-small"></i></th>
       <th onclick="changeIcon(this)" class="header headerSortDown">Sold <i class="icon-sort icon-small"></i></th>
       <th onclick="changeIcon(this)" class="header headerSortDown">Sold to <i class="icon-sort icon-small"></i></th>
       <th>Actions</th>
</tr>
  </thead>
  <tbody>  
    <tr>
       <td>62198</td>
       <td>appale</td>
       <td>2013-02-12</td>
       <td>Foo Bar</td>
       <td><i class="icon-trash icon-small"></i></td>
    </tr>

    <tr>
       <td>64227</td>
       <td>orange</td>
       <td>2013-03-07</td>
       <td>Foo Bar</td>
       <td><i class="icon-trash icon-small"></i></td>
    </tr>
  </tbody>
</table>

そして、私のJavascriptは次のようになります:

var up = false;
function changeIcon(elem)
{
   $(".header").children("i").removeClass();
   $(".header").children("i").addClass("icon-sort icon-small");

   childElement = $(elem).children("i");
   if($(elem).attr("class") == 'header headerSortUp')
   {
      up = false;
      childElement.removeClass();
      childElement.addClass('icon-sort-down icon-small');
   }
   else if ($(elem).attr("class") == 'header headerSortDown')
   {
       up = true;
       childElement.removeClass();
       childElement.addClass('icon-sort-up icon-small');
   }
   else
   {
       if(up == true)
       {
         childElement.removeClass();
         childElement.addClass('icon-sort-up icon-small');
       }
       else
       {
         childElement.removeClass();
         childElement.addClass('icon-sort-down icon-small');
       }

   }
}

これclass="header headerSortDown"は、jQuery テーブル ソート プラグインが独自に追加し、ソートに使用するものです。1 つの行をソートするとすぐに、それらはすべてクラス headerSortDown を失い、ソート方法に応じて、アクティブなものだけがその 1 つまたは headerSortUp を取得します。そのため、クラスは既に存在するので、スクリプトにもそれらを使用すると考えました。else の理由は、ある行を並べ替え、別の行を並べ替えてから元に戻ると、クラスが正しく更新されないように見えるためです。これで機能しますが、並べ替えが混在する場合があり、同じアイコンを 2 回表示して自分自身をリセットします。ここで私のコードに明らかなエラーがあるか、なぜこれが起こっているのかを説明できる人はいますか?

これは、上記のコードとまったく同じです。 http://jsfiddle.net/H9qjb/1/