jQuery: Swap Classes based on Class position
<p>I'm creating an Avatar designer, where users can customize things like hairstyles &amp; hair colours from a preselection.</p>

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

<p>My form is wrapped in a DIV that has three classes:</p>

<pre><code>&lt;div id="container" class="hair-blonde skin-pink boy"&gt;
</code></pre>

<p>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 <code>hair-blonde</code> class. </p>

<p>I can't use  <a href="http://api.jquery.com/toggleClass/" rel="nofollow">ToggleClass</a> or <a href="http://api.jquery.com/addClass/" rel="nofollow">addClass</a> 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. </p>

<p>I thought I could use <a href="http://stackoverflow.com/questions/3203966/jquery-get-the-first-class-only-from-a-element">split</a> to turn the list of classes into an array.
However, when I try to swap the classes nothing happens.</p>

<p>Here is the code I am using:</p>

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

<p>I have also tried this as a variation:</p>

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

<p>Could someone give me some pointers as to what I am doing wrong?</p>

<ul>
<li>Here is <a href="http://jsfiddle.net/tnrZ8/" rel="nofollow">JsFiddle</a> of my work </li>
<li>Here is <a href="http://olo.uk.com/files/test/test6/" rel="nofollow">live site</a> of my work</li>
</ul>
