addClassとremoveClassを使用してクラスを切り替える方法は？

Question

私は自分のSwitcher jQueryを作成して、別の色をクリックするとクラスを削除したいと思います。たとえば、bodyタグに青色のクラスがあり、赤色をクリックすると青いクラスが削除され、など。

コード：

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

Answer 1

まずdocument.readyイベント内のコードを入れていることを確認してください、あなたはクリックハンドラ内で直接data-color属性にアクセスすることができますようeach()ループが冗長であることに注意してください。

第2に、addClassで新しいクラスを追加する前に、removeClassを使用して削除するすべてのクラスのスペース区切りリストを提供することができます。色が追加または削除されている場合は、これは維持するために少し困難になることが

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

Updated fiddle

：これを試してみてください。より良いパターンは、オプションが選択されるか、または色がクリックされるたびに、body要素にクラスを設定する単一の関数を呼び出すことです。新しい色を設定する.toggleClass()を呼び出す前bodyの最後のclassNameセットを選択するには、パラメータ-1で.slice()、パラメータ" "で、.split()を使用してbody要素classNameから設定した色を削除してください

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

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

Answer 3

;：これを試してみてくださいまた、同じ色の見本が連続して

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

をクリックした場合classを取り除く防ぐため.toggleClass()にtrueを追加すると、アレイへのすべての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/