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：基於類位置的交換類

回答

相關問題