Использование JQuery для изменения цвета фона из DIV

Question

Я пытаюсь изменить цвет фона моего DIV, когда пользователь нажимает либо C, M или Y. Мне нужно использовать метод 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

Вы должны использовать значение which от события нажатия клавиши. Я также предлагаю вам использовать switch -statment.

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

---

Благодаря smarx для хедз-ап около jQuery and which.