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');

根据click事件将类添加到多个div

2 个答案: