Javascript 如果div包含另一个类为“的（或子）div”；“关键”；然后更改单击的div的颜色

我有一个类为“section-a”的div，包含类为“key”的按钮的div及其相应的值

我需要遍历这些“key”div，并只更改单击的div的颜色

请参阅摘录：

<div class="keyboard">
  <div class="section">
    <div class="section-a">
      <div class="key function space1">
        esc
      </div>

      <div class="key function">
        F1
      </div>
      <div class="key function">
        F2
      </div>
      <div class="key function">
        F3
      </div>

但反过来，这不会选择当前单击的元素

---

我很确定我错过了一些简单的东西

请找到下面的工作片段。您不需要迭代，使用jQuery可以修改元素数组的类，在本例中，修改包含class

键的每个元素的类。在click事件侦听器上，
$（this）
将引用已单击的元素，以便您可以直接将突出显示的类添加到该元素中


$（'body'）。在（'click'，'key'，function（）上{
$（'.key'）.removeClass（'highlighted'）；
$（this.addClass（'highlighted'）；
});
。突出显示{
颜色：绿色；
}

电子稳定控制系统
一层楼
地上二层
F3
请找到下面的工作片段。您不需要迭代，使用jQuery可以修改元素数组的类，在本例中，修改包含class
键的每个元素的类。在click事件侦听器上，
$（this）
将引用已单击的元素，以便您可以直接将突出显示的类添加到该元素中


$（'body'）。在（'click'，'key'，function（）上{
$（'.key'）.removeClass（'highlighted'）；
$（this.addClass（'highlighted'）；
});
。突出显示{
颜色：绿色；
}

电子稳定控制系统
一层楼
地上二层
F3
尝试以下操作：


$（'body'）。单击（'key'，函数（e）{
$（'div.key'）.css（'color'，'green'）；
$（'div.key'）.not（e.target）.css（'color'，''）；
});

电子稳定控制系统
一层楼
地上二层
F3
尝试以下操作：


$（'body'）。单击（'key'，函数（e）{
$（'div.key'）.css（'color'，'green'）；
$（'div.key'）.not（e.target）.css（'color'，''）；
});

电子稳定控制系统
一层楼
地上二层
F3
如果您的代码正确，谢谢，但问题实际上是我的CDN，它没有加载JQuery库，因此您的代码似乎无法工作。谢谢你这么详细的回答！如果您的代码正确，谢谢，但问题实际上是我的CDN，它没有加载JQuery库，因此您的代码似乎无法工作。谢谢你这么详细的回答！
$(document).click(function(){
    $('div[class*="key"]').css('color', 'green');
});

 $('div[class*="key"]').on("click",function(){
    $('div[class*="key"]').each(function(){
      $(this).css("color","black");
    });
    $(this).css("color","green")
  });