私は、ユーザーがいずれかの<kbd>C</kbd>、<kbd>M</kbd>または<kbd>Y</kbd>押したときに、私のdivの背景色を変更しようとしているのdiv

Question

の背景色を変更するにはjQueryを使用しました。 keypressメソッドを使用する必要がありますが、何らかの理由で私のコードが機能しません。

$(document).ready(function() { 
 
    $(document).keypress(function(event) { 
 
    if (event === 99) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } else if (event === 121) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } else if (event === 109) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } 
 
    }); 
 
});

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

Answer 1

あなたは押されたキーを判別するためにevent.whichを使用する必要があります。ここで働いているコード：

$(document).ready(function() { 
 
    $(document).keypress(function(event) { 
 
    if (event.which === 99) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } else if (event.which === 121) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } else if (event.which === 109) { 
 
     $(".light").css('background-color', "#00ffff"); 
 
    } 
 
    }); 
 
});

div.light { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: black; 
 
}

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

Answer 2

あなたはKeyPressイベントからwhich値を使用する必要があります。私はまたあなたがswitch - 文章を使用することをお勧めします。 jQuery and whichについてのヘッドアップのためのsmarxへ

$(document).ready(function() { 
 
    $(document).keypress(function(e) { 
 
    var color = null; 
 

 
    switch (e.which || e.keyCode || 0) { // Cover all cases 
 
     case 99: // Key - C 
 
     color = '#00FFFF'; break; 
 
     case 109: // Key - M 
 
     color = '#FF00FF'; break; 
 
     case 121: // Key - Y 
 
     color = '#FFFF00'; break; 
 
     default: 
 
     color = '#FFFFFF'; 
 
    } 
 

 
    $('.light').css('background-color', color); 
 
    }); 
 
});

.light { 
 
    width: 95vw; 
 
    height: 95vh; 
 
}

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

---

感謝。