0

2 つの異なる背景画像を切り替えるデモ パネルに取り組んでいます。1 つのリンクをクリックすると、2 つの CSS クラスが変更されます。リンクには data-field="bg1" が含まれており、この値は CSS クラス (top-bg0 および bottombg0) を変更する必要があります。

ここにフィドルのセットアップがあります： http://jsfiddle.net/wpcustoms/ktD3f/

誰かがJavaScriptで私を助けてくれますか?

それが私がこれまでに思いついたことです：

$('.panel ul li a').click(function(){
    var bgname = $(this).data('bg');
    $('#headerbar').removeClass('top-bg0').toggleClass(bgname);
    $('#footerbar').removeClass('bottom-bg0').toggleClass(bgname);
});

現在、top-bg0 部分を削除し、データ フィールド (bg1,2,3) に置き換えます。別のリンクをクリックすると、別のクラスが追加されるため、top-X を変更する代わりに、class="bg1 bg2 bg3" になります。ボトム X 値。クラス文字列で何かを見つけて置き換える方法はありますか?

4

1 に答える 1

1

2つの要素にそれぞれ1つのクラスしかない場合は、引数なしのバージョンを使用し.removeClass()て現在のクラスを削除し、正しいクラスを追加するだけです。

$('.settings-panel .bg_pattern ul li').click(function(){
    var bgname = $(this).data('bg');
    $('#headerbar').removeClass().addClass('top-' + bgname);
    $('#footerbar').removeClass().addClass('bottom-' + bgname);
});

jsFiddleデモを更新

于 2013-02-01T15:21:41.333 に答える