使用Javascript更改表格排序图标的字体

使用Javascript更改表格排序图标的字体,javascript,jquery,html-table,font-awesome,Javascript,Jquery,Html Table,Font Awesome,我在我的项目中使用了令人敬畏的字体图标,我绝对喜欢它。现在我想在我的表中使用它们的图标进行排序,并且我使用用于jQuery的table sorter插件对它们自己的表进行排序。该表如下所示: <table id="myTable" class="tablesorter"> <thead> <tr> <th onclick="changeIcon(this)" class="header headerSortDown">P

我在我的项目中使用了令人敬畏的字体图标,我绝对喜欢它。现在我想在我的表中使用它们的图标进行排序,并且我使用用于jQuery的table sorter插件对它们自己的表进行排序。该表如下所示:

<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>
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');
       }

   }
}
现在,jQuery表排序插件自己添加了
class=“header headerSortDown”
,用于对一行进行排序,一旦我对一行进行排序,它们都会释放类headerSortDown,只有活动的一行会根据我的排序方式获得该类或headerSortUp。既然这些类已经存在,我想我也会在脚本中使用它们。之所以使用else,是因为当我对一行进行排序,对另一行进行排序,然后返回原始行时,类似乎没有正确更新。现在它可以工作了,但有时排序会混合,它会显示相同的图标两次以重置自身。有人能在我的代码中看到任何明显的错误吗?或者对发生这种情况的原因有一个很好的解释

这里有一把与上面代码完全相同的小提琴。

问题是什么?问题是为什么图标有时会改变,但有时不会。这里有一个视觉问题。您需要添加问题发生时间的屏幕截图,因为无法重现它。