jquery - 根据点击事件将类添加到多个 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

将逗号从删除类中删除

$('.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/阅读更多内容

Answer 2

阅读文档：http ://api.jquery.com/removeClass ;)

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