Question

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

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

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 - 陈述。

$(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的单挑。

使用jQuery更改div的背景颜色

2 个答案: