javascript - 使用 jQuery 改变 div 的背景颜色

Question

我试图在用户按下 C、M 或 Y 时更改我的 div 的背景颜色。我需要使用按键方法，但由于某种原因我的代码不起作用。

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