jQuery：根据类位置交换类

Question

我正在创建一个 Avatar 设计师，用户可以通过预选自定义发型和发色等内容。

它基本上是一个带有单选按钮的表单，可用于自定义头像。

我的表单包含在一个包含三个类的 DIV 中：

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

我需要类来获取单选按钮的值。 因此，如果用户单击头发颜色，则头发颜色单选按钮的值将覆盖hair-blonde 类。

我不能使用ToggleClass 或addClass，因为它们无法让您控制更改哪个类。此外，如果 hair-blonde 变为 hair-red，那么脚本将不再工作，因为它仍会寻找 hair-blonde。

我想我可以使用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
• 这是我的工作live site

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。