6

並べ替えに使用する 2 つのリンクがあります。1 つは Make で、もう 1 つはモデルで (両方とも昇順と降順)。

今は持っているので、ページをロードすると、モデルの降順とメイクの降順のみが表示されます。モデル降順をクリックすると、そのリンクが非表示になり、モデル昇順のリンクが表示されます。

Q: 現在選択されているソート用の列をクリックすると太字になりたいです。別の列が選択されると、太字が解除され、元のリンクにリセットされます。

HTML:

<a href='#' id='modelD'>Model D</a>
<a href='#' id='modelA'>Model A</a>
<a href='#' id='makeD' >Make D</a>
<a href='#' id='makeA' >Make A</a>​

Jクエリ:

$('#modelA').hide();
$('#makeA').hide();

$('#modelD').click(function(){
    $('#modelD').hide();
    $('#modelA').show();
});

$('#modelA').click(function(){
    $('#modelA').hide();
    $('#modelD').show();  
});

$('#makeD').click(function(){
    $('#makeD').hide();
    $('#makeA').show();

});

$('#makeA').click(function(){
    $('#makeA').hide();
    $('#makeD').show();
});

これがコードのフィドルです。 http://jsfiddle.net/JKFKC/1/

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

8

これを使って

.css('font-weight', 'bold')

コードを小さくする

$('#modelD, #modelA').click(function() {
    $('#modelD, #modelA').toggle().css('font-weight', 'bold');
    $('[id^=make]').css('font-weight', 'normal');
});


$('#makeA, #makeD').click(function() {
    $('#makeA, #makeD').toggle().css('font-weight', 'bold');
    $('[id^=model]').css('font-weight', 'normal');
});

デモ

于 2012-06-13T16:57:22.307 に答える
1

など、連動するリンクのクラスを定義しますmodel。次に、モデルをクリックすると:

$(".model").css({"font-weight":"normal"}); // un-bold all the model links
$(this).css({"font-weight":"bold"}); // bold the clicked link.
于 2012-06-13T16:58:48.817 に答える