如果div包含具有类"key"的另一个(或子)div,则更改clicked div的颜色

Question

我有一个带有"section-a"类的div,其中包含类"key"按钮的div和它们对应的值.

我需要遍历这些"键"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>

因此,如果您单击F1,则字体的颜色将变为绿色,如果再次单击按钮(或其他按钮),则返回白色.

我知道你需要使用toggleClass,但问题是迭代包含类键的div.

另一个解决方案(但不是最好的编程实践)会为每个按钮添加一个onclick事件,这很容易但不是很干.

我最接近的是使用:

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

但反过来,这不会选择当前点击的元素.

我很确定我在这里错过了一些简单的东西!

Answer 1

请在下面找到工作代码段.您不需要迭代,使用jQuery,您可以修改元素数组的类,在本例中,包含该类的每个元素key.在click事件侦听器上,$(this)将引用被单击的元素,以便您可以直接向其添加突出显示的类.

$('body').on('click', '.key', function(){
  $('.key').removeClass('highlighted');
  $(this).addClass('highlighted');
});

.highlighted{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>
</div>