根據點擊事件將課程添加到多個div

Question

這是場景。我的客戶希望能夠改變我爲他設計的網站的顏色主題。 我有4個div，點擊後會改變另外4個div的邊框顏色。每個點擊事件都會將div更改爲不同的顏色，具體取決於所點擊的是哪一個。

我認爲使用一些jQuery會解決它，但我必須做錯了什麼！這是我想要運行的：

$('.btn1').on('click', function(){ 
    $('.box').removeClass('colour2, colour3, colour4'); 
    $('.box').addClass('colour1'); 
}); 

$('.btn2').on('click', function(){ 
    $('.box').removeClass('colour1, colour3, colour4'); 
    $('.box').addClass('colour2'); 
}); 

$('.btn3').on('click', function(){ 
    $('.box').removeClass('colour1, colour2, colour4'); 
    $('.box').addClass('colour3'); 
}); 

$('.btn4').on('click', function(){ 
    $('.box').removeClass('colour1, colour2, colour4'); 
    $('.box').addClass('colour4'); 
}); 

任何幫助將不勝感激。

Answer 1

閱讀文檔：http://api.jquery.com/removeClass;）

//$('.box').removeClass('colour2, colour3, colour4'); 
$('.box').removeClass('colour2 colour3 colour4'); 

Answer 2

以逗號出你刪除類的

$('.btn1').on('click', function(){ 
    $('.box').removeClass('colour2 colour3 colour4'); 
    $('.box').addClass('colour1'); 
}); 

$('.btn2').on('click', function(){ 
    $('.box').removeClass('colour1 colour3 colour4'); 
    $('.box').addClass('colour2'); 
}); 

$('.btn3').on('click', function(){ 
    $('.box').removeClass('colour1 colour2 colour4'); 
    $('.box').addClass('colour3'); 
}); 

$('.btn4').on('click', function(){ 
    $('.box').removeClass('colour1 colour2 colour4'); 
    $('.box').addClass('colour4'); 
}); 

注：你可以直接叫.removeClass()擺脫如果所有的類，但你有更多的課程，而不僅僅是這三個，它會將它們全部刪除。閱讀更多信息http://api.jquery.com/removeClass/