2

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

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

如果您当前在单击“价格”时参考上面的 jsfiddle，则文本颜色将变为红色 - 与“字母顺序”相同。

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

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

所以最终产品应该是：

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

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

4

2 回答 2

3

没有理由添加一个额外的类.. 只需将你的 css 建立在 ID 或其他静态类的基础上sort-price，sort-alpha然后你就可以设置如下样式：

.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 */ }

工作小提琴

于 2012-09-24T02:29:47.313 回答
3

试试这个：

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

http://jsfiddle.net/NLv5J/

于 2012-09-24T02:31:13.410 回答