Databases
StackOverflow2013
Postsdbo
POjQuery: Swap Classes based on Class position
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: Swap Classes based on Class position
    text
    copied!<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 noreferrer">ToggleClass</a> or <a href="http://api.jquery.com/addClass/" rel="nofollow noreferrer">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="https://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 noreferrer">JsFiddle</a> of my work </li> <li>Here is <a href="http://olo.uk.com/files/test/test6/" rel="nofollow noreferrer">live site</a> of my work</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload