Question

I’m creating an Avatar designer, where users can customize things like hairstyles & hair colours from a preselection.

It is basically a form with radio buttons that can be used to customize the avatar.

My form is wrapped in a DIV that has three classes:

<div id="container" class="hair-blonde skin-pink boy">

I need the classes to take the values of the radio buttons.
So if a user clicks on a hair colour, the value of the hair colour radio button will overwrite the hair-blonde class.

I can’t use ToggleClass or addClass because these don’t give you control over which class is changed. Also, if hair-blonde changes to hair-red, then the script wont work anymore as it will still be looking for hair-blonde.

I thought I could use split to turn the list of classes into an array.
However, when I try to swap the classes nothing happens.

Here is the code I am using:

$(".skincolour input").click(function(){
var newskincolour = $(this).val();
var skin_colour = $('#container').attr('class').split(' ')[1];
var skin_colour = newskincolour;
});

I have also tried this as a variation:

$(".skincolour input").click(function(){
var newskincolour = $(this).val();
var skin_colour = $('#container').attr('class').split(' ')[1];
var skin_colour = $(".skincolour input").val();
});

Could someone give me some pointers as to what I am doing wrong?

• Here is JsFiddle of my work
• Here is live site of my work

Answer 1

Your approach could work, but you forgot to overwrite the element’s class attribute. Try this:

$(".skincolour input").click(function(){
    var newskincolour = $(this).val();
    var classes = $('#container').attr('class').split(' ');
    classes[1] = newskincolour;
    $('#container').attr('class', classes.join(' '));
});