0

我在我的项目中为图标使用了很棒的字体，并且非常喜欢它。现在我想使用他们的图标在我的表格中进行排序，并且我使用 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 表格排序插件自己添加的东西，用于排序，一旦我对一行进行排序，它们都会丢失类 headerSortDown，只有活动的那个会得到那个类或 headerSortUp，具体取决于我的排序方式。因此，由于这些类已经存在，我想我也会将它们用于脚本。else 的原因是因为当我对一行进行排序，对另一行进行排序然后返回到原始行时，类似乎没有正确更新。现在这可行，但有时排序会混淆，它会显示相同的图标两次以重置自身。任何人都可以在这里看到我的代码中的任何明显错误，或者对为什么会发生这种情况有一个很好的解释。？

这是与上面的代码完全一样的小提琴。 http://jsfiddle.net/H9qjb/1/

4

0 回答 0