jQuery：基于类位置的交换类

我正在创建一个头像设计器，用户可以在其中自定义诸如发型&预选的发色。jQuery：基于类位置的交换类

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

我的形式被包裹在有三类一个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我的工作
的这是我的工作

来源

2012-09-28 big_smile

您的方法可行，但您忘记覆盖元素的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-28 14:28:20 bfavaretto

谢谢你，bfavaretto。这很好用！ –

您可以使用removeClass删除同一类的类，其次是addClass的live site。

来源

2012-09-28 14:25:19

我不明白。假设我告诉Jquery删除.hairblonde并添加.hairred。那么，当用户点击不同的颜色，脚本不会工作，因为.hairblonde不再存在。 –

您可以删除不存在的类。所以你可以做'.removeClass（'。hairblonde'）。removeClass（'。hairbrown'）。addClass（'。hairred'）;' –

感谢您的帮助。由于需要更少的代码编写，bfavaretto的解决方案稍微好一些。但是，你仍然是一个好主意！再次感谢！ –

jQuery：基于类位置的交换类

回答

相关问题