Toggle one data-value in two different classes

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?

Anthony Grist · Accepted Answer · 2013-02-01 15:21:41Z

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

answered Feb 1, 2013 at 15:21

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle one data-value in two different classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related