Question

我正在创建一个Avatar设计师，用户可以在其中定制诸如发型和发型之类的东西。头发颜色来自预选。

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

我的表单包含在一个有三个类的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
以下是我工作的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。

jQuery：基于类位置的交换类

2 个答案: