2

2 つのアンカーに特定のクラスを設定できるようにする必要があります。

これまでの私のコードは次のとおりです: http://jsfiddle.net/MV4uM/15/

上記の jsfiddle を参照すると、現在「価格」をクリックすると、テキストの色が赤に変わります - 「アルファベット順」と同じです。

ただし、これらは両方とも異なるアイコンが関連付けられているため、特定のクラスを挿入して、通常のアイコンを「選択済み」に変更して、選択されているユーザーを表示できるようにする必要があります。

特定のクラスの理由は、画像が CSS を介して背景画像を介してレンダリングされるため、CSS 内で画像を参照できるようにするためです。

したがって、最終製品は次のようになります。

ユーザーが「Price」をクリックすると、「price-selected」という名前のクラスがアンカーに挿入されるので、CSS でこれを参照できます。「Alphabetical」については、ユーザーが「aplha-selected」という名前のクラスのアンカーをクリックすると、CSS でこれを参照して、背景画像を変更して選択状態を表示できます。

これは「ソーター」として使用されているため、一度に選択できるのは 1 つだけです。

4

2 に答える 2

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 に答える
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 に答える