Question

I am working on a demo panel which should switch two different background images.
you click on one link and two css classes are changed.
the link contains data-field=”bg1″ and this value needs to change the css class: top-bg0 and bottombg0.

Here is a fiddle setup:
http://jsfiddle.net/wpcustoms/ktD3f/

can somebody please assist me with the javascript?

that`s what I came up so far:

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

it currently removes the top-bg0 part and replaces it with the data-field (bg1,2,3) clicking on another link adds another class so it ends up with class=”bg1 bg2 bg3″ instead of changing the top-X and bottom-X value. Is there a way to FIND something in a class string and replace it?

Answer 1

If your two elements only have the one class each, then you could simply use the no argument version of .removeClass() to remove whatever the current class is, then add the correct one:

$('.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