Mit jQuery Hintergrundfarbe eines div

Question

Ich versuche, die Hintergrundfarbe meiner div zu ändern, wenn der Benutzer drückt entweder C, M oder Y zu ändern. Ich muss die Tastendruck-Methode verwenden, aber aus irgendeinem Grund funktioniert mein Code nicht.

$(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

Sie müssen event.which verwenden, um zu bestimmen, welche Taste gedrückt wurde. Hier arbeitet Code:

$(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

Sie müssen den which Wert aus dem KeyPress-Ereignis verwenden. Ich würde auch vorschlagen, dass Sie eine switch-Anweisung verwenden.

$(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>

---

Dank smarx für die Heads-up über jQuery and which.