javascript - JQuery 切换和删除多个 div 中的 css 类

Question

我有以下 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 上的类:

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

我想在每个“包装”中拥有或所有“红色”或只有一个“绿色”div，而不取消(转换为红色)所有 Div 到所有“包装”

Answer 1

添加/删除类时只需要针对兄弟元素，而不是所有绿色元素

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

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="red" id="ch..">Content</div>
</div>

---

或者使用事件委托(delegate)模型

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

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="red" id="ch..">Content</div>
</div>