Javascript 当我单击“交换”按钮时，如何让我的红色div更改背景色以在红色和绿色之间切换？

在下面的代码中，当我单击“交换”按钮时，如何让我的红色div更改背景颜色以在红色和绿色之间切换

$（文档）.ready（onReady）；
var numberOfClicks=0；
函数onReady（）{
console.log（'inside on ready'）；
$（“#创建”）。在（'click'，createNewDiv）上；
//$（“.color div”）。在（'click'，'delete'，deleteDiv'）；
}
函数createNewDiv（）{
log（'insidecreatenewdiv'）；
var$div=$（“+”“+numberOfClicks++”
“+”）；
变量$button1=$（'Delete'）；
变量$button2=$（'Swap'）；
$（'#container'）。追加（$div）；
$（$div）.append（$button1）；
$（$div）.append（$button2）；
//这是“删除”按钮的事件侦听器
$（'.delete'）。在（'click'，function（）上{
log（“内部删除按钮”）；
$（this.parent（）.remove（）；
});
$（'.swap'）。在（'click'，function（）上{
log（“内部交换按钮”）；
$（this.parent（）.toggleClass（“绿色”）；
});
}
函数deleteDiv（）{
console.log（“按下删除按钮”）；
}

/*CSS样式表*/
/*------------请勿修改此文件--------*/
身体{
字体系列：无衬线；
}
.色彩组{
身高：5公分；
宽度：100%；
背景色：红色；
显示：块；
边缘底部：1米；
}

第一个代码挑战
我的第一个代码挑战
主要内容标题
创建按钮

您在单击“交换”时切换一个类“绿色”，如果您像这样为绿色添加一个CSS类，它应该可以工作：

$（文档）.ready（onReady）；
var numberOfClicks=0；
函数onReady（）{
console.log（'inside on ready'）；
$（“#创建”）。在（'click'，createNewDiv）上；
//$（“.color div”）。在（'click'，'delete'，deleteDiv'）；
}
函数createNewDiv（）{
log（'insidecreatenewdiv'）；
var$div=$（“+”“+numberOfClicks++”
“+”）；
变量$button1=$（'Delete'）；
变量$button2=$（'Swap'）；
$（'#container'）。追加（$div）；
$（$div）.append（$button1）；
$（$div）.append（$button2）；
//这是“删除”按钮的事件侦听器
$（'.delete'）。在（'click'，function（）上{
log（“内部删除按钮”）；
$（this.parent（）.remove（）；
});
$（'.swap'）。在（'click'，function（）上{
log（“内部交换按钮”）；
$（this.parent（）.toggleClass（“绿色”）；
});
}
函数deleteDiv（）{
console.log（“按下删除按钮”）；
}

/*CSS样式表*/
/*------------请勿修改此文件--------*/
身体{
字体系列：无衬线；
}
.色彩组{
身高：5公分；
宽度：100%；
背景色：红色；
显示：块；
边缘底部：1米；
}
格林先生{
背景颜色：绿色；
}

第一个代码挑战
我的第一个代码挑战
主要内容标题
创建按钮