Question

学习jQuery的新手。我一直在看w3schools的一些教程。我的目的是在按下键时更改形状颜色。我可以针对按钮执行此操作，但不能针对形状执行操作。

我正在使用退格键8，并且正在使用

$("button").keydown(function(e) {
    if(e.which === 8) {
    	$(this).css("background-color", "black");
    }
});
$("button").keyup(function() {
    $(this).css("background-color", "yellow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button>
Color
</button>

例如，我将如何执行以下操作。我已经尝试了几种方法，但似乎无法使其正常工作。为什么不将选择器更改为类名不起作用？任何提示均感激不尽。谢谢

.shape{
width: 40px;
height: 40px;
background-color: pink;
}

<div class="shape">

Answer 1

您的button本机接受键盘焦点，而您的div不接受键盘焦点。将此添加到.shape：

<div class="shape" tabindex="0"></div>

演示

$(".shape").keydown(function(e) {
  if (e.which === 8) {
    // added for demo to prevent browser address change
    e.preventDefault();
    $(this).css("background-color", "black");
  }
});
$(".shape").keyup(function() {
  $(this).css("background-color", "yellow");
});

.shape {
  width: 40px;
  height: 40px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape" tabindex="0"></div>

jsFiddle

要监听任何关键事件，而无需将重点放在特定元素上，可以将代码调整为以下内容：

$(document).keydown(function(e) {
  if (e.which === 8) {
    e.preventDefault();
    $(".shape").css("background-color", "black");
  }
});
$(document).keyup(function() {
  $(".shape").css("background-color", "yellow");
});

.shape {
  width: 40px;
  height: 40px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape"></div>

jsFiddle

jQuery-更改颜色

1 个答案: