1

我正在创建一个 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();
});

有人可以给我一些关于我做错了什么的指示吗？

4

2 回答 2

1

您的方法可以工作，但您忘记覆盖元素的class属性。尝试这个：

$(".skincolour input").click(function(){
    var newskincolour = $(this).val();
    var classes = $('#container').attr('class').split(' ');
    classes[1] = newskincolour;
    $('#container').attr('class', classes.join(' '));
});
于 2012-09-28T14:28:20.703 回答
0

您可以使用removeClass删除相同类别的类，然后使用addClass.

于 2012-09-28T14:25:19.340 回答