如果 div 包含另一个（或子）div 类为“key”，则更改单击的 div 的颜色答案

【问题标题】：If div contains another (or child) div with class "key" then change color of clicked div如果 div 包含另一个（或子）div 类为“key”，则更改单击的 div 的颜色
【发布时间】：2017-03-27 10:24:05
【问题描述】：

我有一个“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');
});

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

我很确定我在这里遗漏了一些简单的东西！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

请在下面找到有效的 sn-p。您不需要迭代，使用 jQuery，您可以修改元素数组的类，在这种情况下，包含类 key 的每个元素的类。而在点击事件监听器上，$(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>

【讨论】：

您的代码如果正确，谢谢，但问题实际上是我的 CDN，它没有加载 JQuery 库，所以您的代码似乎不起作用。谢谢这么详细的回答！

【解决方案2】：

尝试以下方法：

$('body').click('.key',function(e){
    $('div.key').css('color', 'green');
    $('div.key').not(e.target).css('color', '');
});

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

【讨论】：

【解决方案3】：

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

【讨论】：