Come passare da una classe usando addClass e removeClass?

Question

Creo il mio proprio Switcher jQuery, e voglio rimuovere classe quando clicca su un altro colore, per esempio: ho classe "blu" sul tag body e quando qualcuno clicca sul rosso dovrebbe rimuovere la classe blu e sostituirlo con classe di rosso ecc ..

Codice:

$("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); 
    }); 
}); 

Demo: https://jsfiddle.net/uikithemes/p18cqa5s/

Answer 1

In primo luogo, si noti che il ciclo each() è ridondante come si può accedere all'attributo data-color direttamente all'interno del gestore click.

In secondo luogo, per ottenere ciò che è necessario è possibile fornire un elenco delimitato da spazi di tutte le classi da rimuovere utilizzando removeClass prima di aggiungere la nuova classe con addClass. Prova questo:

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

Updated fiddle

Tuttavia questo può diventare un po 'difficile da mantenere se vengono aggiunti o rimossi i colori. Uno schema migliore sarebbe chiamare una singola funzione per impostare le classi sull'elemento body ogni volta che viene selezionata un'opzione o si fa clic su un colore. Prova questo:

$(".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

Answer 2

utilizzare il metodo removeClass() a rimuovere le classi esistenti e chiamare addClass() per aggiungere la nuova classe.

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

removeClass() metodo senza alcun parametro rimuoverà tutte le classi.

versione più semplificata

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

Assicurati di inserire il codice all'interno document.ready evento

Answer 3

provare a rimuovere il colore insieme da body elemento className usando .split(), con il parametro " ", .slice() con il parametro per selezionare -1 ultima className impostato su body prima di chiamare .toggleClass() per impostare nuovo colore; anche aggiungendo true per .toggleClass() per impedire rimozione class se stesso campione di colore cliccata in successione

// 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/

Answer 4

Aggiungere tutti data_color a una matrice e poi al click del colore rimuovere tutte classe dal corpo che sono in l'array. Dopo di ciò aggiungi una nuova classe come segue.

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")); 
    }); 
}); 

Aggiornato Fiddle: https://jsfiddle.net/p18cqa5s/5/