1

誰かがこの質問のより良いタイトルを考えられる場合は、自由に変更してください。これが問題です。ナビゲーション メニューで項目をクリックすると、項目が赤くマークされます (デフォルトはオレンジ色です)。オレンジと赤の両方のスタイル (クラス名bmarkとbmark_activeそれぞれ) は、CSS Button Generator アプリケーションを使用して生成されました。これは、ジョブを実行する必要がある jQuery コードです。

$(function () {
    $('.bmark').click(function(){
        $('.bmark_active').addClass('bmark');
        $('.bmark_active').removeClass('bmark_active');
        $(this).addClass('bmark_active');
        $(this).removeClass('bmark');
    });
})

デフォルトのボタン（フィドルの例では「すべて」）を除くすべてのボタンで正常に機能します。たとえば、「ロシア」をクリックすると、赤のフォーカスがそのボタンに移動します (オレンジ色のクラスを削除して赤のクラスを追加することにより) が、もう一度「すべて」をクリックしても赤に切り替わりません。それはなぜですか、どうすれば修正できますか?

JSフィドル

4

3 に答える 3

1

あなたのフィドルを更新してください。より簡素化。ここでの他の回答は問題なく機能しますが、これはそれを処理する最も冗長な方法です。

$(function () {

    $('.bmark').click(function(){
        $('.bmark').removeClass('active');
        $(this).addClass('active');
   });
})

http://jsfiddle.net/chazelton/52esG/2/

于 2013-06-01T15:14:57.883 に答える
1

click()イベントを親要素に適用するのではなく、子要素にのみ適用します。

$(function () {
    $('.bmark, .bmark_active').click(function(){
        $('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
        $(this).addClass('bmark_active').removeClass('bmark');
    });
})

ここでjsFiddle。

于 2013-06-01T15:12:57.820 に答える
1

「.bmark_active」要素にバインドしていません。

あなたはこれを行うことができます ：

$(function () {
    $(document).on('click', '.bmark_active,.bmark', function() {
        $('.bmark_active').addClass('bmark').removeClass('bmark_active');
        $(this).removeClass('bmark').addClass('bmark_active');
    });
})

デモンストレーション

しかし、ほとんどの場合、イベント処理コードが

 $('.bmark').removeClass('active');
 $(this).addClass('active');

また、2 つのクラスは今のところほとんど同じであり、「アクティブ」クラスで分離された 2 つのモード間でいくつかの変更を行う方がよいため、CSS をよりクリーンにすることもできます。

于 2013-06-01T15:14:03.390 に答える