我在项目中使用字体很棒的图标并且非常喜欢它。现在我想在我的表中使用他们的图标进行排序,我使用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/