jQuery: поменять классы на основе позиции класса

Question

Я создаю дизайнера Аватара, где пользователи могут настраивать такие вещи, как прически и цвета волос, из предварительного выбора.

Это в основном форма с переключателями, которые можно использовать для настройки аватара.

Моя форма обернута в DIV, который имеет три класса:

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

Мне нужны классы, чтобы принимать значения переключателей. Поэтому, если пользователь нажимает на цвет волос, значение переключателя цвета волос будет перезаписывать hair-blonde учебный класс.

Я не могу использовать ToggleClass или addClass, потому что они не дают вам контроль над тем, какой класс изменяется. Кроме того, если волосы-блондин станут красными, то сценарий больше не будет работать, так как он все равно будет искать блондинку.

Я думал, что смогу использовать split, чтобы превратить список классов в массив. Однако, когда я пытаюсь поменяться местами, ничего не происходит.

Вот код, который я использую:

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

Я также попробовал это как вариант:

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

Может ли кто-нибудь подсказать мне, что я делаю неправильно?

• Вот JsFiddle моей работы
• Вот живой сайт моей работы

Answer 1

Ваш подход может работать, но вы забыли перезаписать элемент class приписывать. Попробуй это:

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

Answer 2

Вы можете использовать removeClass для удаления классов той же категории, а затем addClass,