Question

我需要能够在两个锚上设置一个特定的类。

到目前为止，我的代码是：http://jsfiddle.net/MV4uM/15/

如果您在上面提到上面的jsfiddle，如果点击“价格”，文字颜色会变为红色 - “字母”相同。

但是，由于这两者都有不同的图标关联，我需要插入一个特定的类，以便能够将普通图标更改为“已选择”以显示所选的用户。

特定类的原因是我可以在CSS中引用图像，因为图像将通过CSS渲染背景图像。

所以最终产品应该是：

当用户点击“价格”时，会在名为“价格选择”的锚点上插入一个类，因此我可以在CSS中引用它。对于“按字母顺序排列”，当用户再次点击一个名为“aplha-selected”的类时，我可以在CSS中引用它来更改背景图像以显示所选状态。

一次只能选择一个，因为它被用作“分拣机”。

Answer 1

Theres没有理由添加额外的类..只是根据ID或sort-price和sort-alpha之类的其他静态类创建css，然后你可以像：

.sort-alpha.selected { /* bg image or what have you */ }
.sort-price.selected { /* bg image or what have you */ }

您现在可以在不使用ID更改内容的情况下执行此操作：

#alpha.selected { /* bg image or what have you */ }
#price.selected { /* bg image or what have you */ }

Working Fiddle

Answer 2

试试这个：

$(".btnSort").click(function () {
    var cls = this.id + '-selected'
    $(".btnSort").attr('class', 'btnSort');
    $(this).addClass(cls + ' selected');
});

http://jsfiddle.net/NLv5J/

单击时添加/删除特定类

2 个答案: