클릭 이벤트에 따라 여러 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()를 호출 할 수있는 모든 클래스의지만 있다면 없애 상자에 클래스가 3 개가 아닌 모든 클래스가 삭제됩니다. http://api.jquery.com/removeClass/