在兩個不同的類切換一個數據值

Question

我演示面板，其應當切換兩個不同的背景圖像上的工作。 你點擊一個鏈接和兩個CSS類改變。 該鏈接包含data-field =「bg1」，該值需要更改css類：top-bg0和bottombg0。

這裏是一個小提琴設置： http://jsfiddle.net/wpcustoms/ktD3f/

可以請人幫助我的JavaScript？

that`s我想出了迄今：

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

它目前去除頂BG0一部分，並與該數據字段代替它（bg1,2,3）點擊另一個鏈接又增加了所以它以class =「bg1 bg2 bg3」結束，而不是改變top-X和bottom-X值。有沒有辦法找到類字符串中的東西，並將其替換？

Answer 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); 
}); 

Updated jsFiddle demo