如何使用addClass＆removeClass在類之間切換？

我創建了我自己的切換器jQuery，並且我想在點擊另一種顏色時移除類，例如：我在身體標記上有「藍色」類，當有人點擊紅色時，應該刪除藍色類並將其替換爲紅色類等。
如何使用addClass＆removeClass在類之間切換？

代碼：

$("body").addClass("wide light blue"); 

// Switcher jQuery Plugin 
$(".switcher-toggle").click(function() { 
    $("#switcher").toggleClass("open"); 
}); 

// Theme Layout Switch 
$(".layout").change(function() { 
    var layout = $(".layout").val(); 
    $(".wrapper").css("width",layout); 
}); 

// Theme Skins Switch 
$(".skins").change(function() { 
    var skin = $(".skins").val(); 
    $("body").toggleClass(skin); 
}); 

// Theme Colors Switch 
$(".colors span").each(function() { 
    var data_color = $(this).attr("data-color"); 
    $(this).click(function() { 
     $("body").toggleClass(data_color); 
    }); 
});

演示： https://jsfiddle.net/uikithemes/p18cqa5s/

來源

2015-12-19 Mutamiz Team

你沒有真正使用'wide'和'light'類東西，所以只刪除所有類好像它應該工作 - > https：//開頭的jsfiddle。 net/adeneo/p18cqa5s/6/ – adeneo

是的，你是對的！謝謝:) –

首先，注意each()環是多餘的，你可以單擊處理程序內直接訪問data-color屬性。其次，爲了達到你所要求的，你可以在addClass之前添加新類，然後使用removeClass提供一個空格分隔的所有類的空格分隔列表。試試這個：

$(".colors span").click(function() { 
    $("body") 
     .removeClass('blue red green orange carrot violet pink gold') 
     .addClass($(this).data("color")); 
});

Updated fiddle

然而，這可能會變得有點難以維持，如果顏色添加或刪除。一個更好的模式是調用一個函數來設置body元素上的類，只要選擇了一個選項或者單擊一個顏色。試試這個：

$(".skins, .layout").change(applyClasses); 
$(".colors span").click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
    applyClasses(); 
}); 

function applyClasses() { 
    var classes = [ 
     $(".skins").val(), 
     $(".layout").val(), 
     $(".colors span.active").data('color') 
    ]; 

    $('body').removeClass().addClass(classes.join(' ')); 
} 

applyClasses(); // on load

Updated fiddle

來源

2015-12-19 18:25:11

第一種方法對我來說工作很好，非常感謝你拯救我的項目:)這是我現在的新演示：[link]（https://jsfiddle.net/uikithemes/p18cqa5s/18 /） –

很高興幫助。我建議你使用第二種方法，因爲它更具可擴展性。 –

使用removeClass()方法刪除現有的課程並致電addClass()添加新的課程。

// Theme Colors Switch 
$(".colors span").each(function() { 
    var data_color = $(this).attr("data-color"); 
    $(this).click(function() { 
     $("body").removeClass().addClass(data_color);    
    }); 
});

removeClass()沒有任何參數的方法會刪除所有的類。

更簡化版本

$(".colors span").click(function(e){ 
    e.preventDefault(); 
    $("body").removeClass().addClass($(this).attr("data-color")); 
})

確保把你的代碼中document.ready事件

來源

2015-12-19 18:23:49 Shyju

請注意，'body'將會在'select'元素的'change'事件中添加類。使用'removeClass'將消除這些以及顏色類。 –

非常感謝你的幫助:) –

嘗試使用.split()從body元素className除去一套色彩，具有參數" "，.slice()與參數-1調用.toggleClass()設置新的顏色之前選擇上body最後className集;還加入true到.toggleClass()防止去除class如果同一色板連續點擊

// Theme Colors Switch 
$(".colors span").each(function() { 
    var data_color = $(this).attr("data-color"); 
    $(this).click(function() { 
     $("body").removeClass(document.body.className.split(" ").slice(-1)[0]) 
     .toggleClass(data_color, true); 
    }); 
});

的jsfiddle https://jsfiddle.net/p18cqa5s/3/

來源

2015-12-19 18:28:21 guest271314

非常感謝您的幫助:) –

將所有data_color到一個數組，然後在顏色點擊刪除其主體是所有類陣列。之後，添加新的類如下。

var data_color= []; 
// Theme Colors Switch 
$(".colors span").each(function() { 
    data_color.push($(this).attr("data-color")); 
    $(this).click(function() { 
     $("body").removeClass(data_color.join(' ')).addClass($(this).attr("data-color")); 
    }); 
});

更新小提琴：https://jsfiddle.net/p18cqa5s/5/

來源

2015-12-19 18:37:26 Azim

非常感謝您的幫助:) –

如何使用addClass＆removeClass在類之間切換？

回答

相關問題