divにクラス "key"を持つ別の（または子）divが含まれている場合、クリックしたdivの色を変更します

Question

クラス "key"のボタンと対応する値のdivを含むクラス "section-a"を持つ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を反復することです。

もう1つの解決方法（プログラミングの習慣では最高の方法ではない）は、各ボタンにonclickイベントを追加することですが、これは簡単ですが非常にDRYではありません。

私が来た最も近いが使用していた：

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

が、順番に、これは現在のクリックされた要素を選択しません。

私はここで何か簡単なものが欠けていると確信しています！

Answer 1

以下のワーキングスニペットをご覧ください。反復する必要はありません.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>

Answer 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>

Answer 3

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