Javascript JQuery在多个div中切换和删除css类

我有以下HTML：

<div class="wrap">
div class="red" id="ch1">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
...
<div class="green" id="ch..">Content</div>
</div>

---

我希望在每个“包装”中有或全部“红色”或只有一个“绿色”div，而不取消（转换为红色）所有div到所有“包装”

在添加/删除类时，您只需要针对同级元素，而不是所有的绿色元素

$（'.red，.green'）。在（'click'，function（）上{
$（this）.this.sides（.green”）.removeClass（.green”）.addClass（.red”）；
$（this.toggleClass（'red-green'）；
});
.red{
颜色：红色
}
格林先生{
颜色：绿色
}

内容
内容
内容
内容
内容
内容
如果。。。else

语句；如果单击的元素具有类

.red

，则将

.green

切换到父级

.wrap

内部的

.red

，然后将类从

.green

切换到

.red

。如果单击的元素具有类

.green

将类从

.red

切换到

.green

$（“.red，.green”）。单击（函数（e）{
如果（$（此）.is（“.red”））{
$（this.parent（“.wrap”）.find（“.green”）.toggleClass（“红绿”）
.end（）.find（this）.toggleClass（“绿-红”）；
}否则{
$（此）.toggleClass（“红-绿”）
}
});
.red{
背景色：#CC0000；
}
格林先生{
背景色：#009900；
}

内容
内容
内容
...
内容
内容
内容

$(".red , .green").click(function(){
    $(".green").not($(this)).removeClass("green").addClass("red");
     $(this).toggleClass('red green');
});  

$('.red, .green').on('click', function() { 
  $(".green").prop("class", "red");
  $(".red").prop("class", "green");
}