Question

我正在尝试添加一个只听一个'a'按键的按键监听器，当它被触发时，背景会变成透明的白色，边框略带灰色。

这就是我所拥有的，不知怎的，它不起作用。（别介意其他CSS类，它们只是用于字体装饰）有人能告诉我我没看到的内容吗？

$( "#test" ).keypress(function( event ) {
  //I think 97 is the character code for 'a'
  if(event.which == 97){
    $(this).addClass('.test_card');
  }else{
    event.preventDefault();
   }
});

body{background: black;
}

.card{
  background-color:transparent;
  width:10%;
  margin-left:1.25%;
  height: 100%;
  border: white solid 2px;
  display:inline-block;
  color: white;
}
.test_card{
  background-color: rgba(255, 255, 255, .3);
  border: grey solid 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="card" id="test">
  <h1 class="card__title">A</h1>
  <p class="card__description">
    Snare
  </p>
</div>
</body>

Answer 1

删除.中的addClass('.test_card')。同时将事件绑定到文档而不是div，这样每次按a时，事件都会触发

＆＃13;

$(document).keypress(function(event) {
  if (event.which == '97') {
    $('#test').addClass('test_card');
  }
});

＆＃13;

body {
  background: black;
}

.card {
  background-color: transparent;
  width: 10%;
  margin-left: 1.25%;
  height: 100%;
  border: white solid 2px;
  display: inline-block;
  color: white;
}

.test_card {
  background-color: rgba(255, 255, 255, .3);
  border: grey solid 2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="card" id="test">
    <h1 class="card__title">A</h1>
    <p class="card__description">
      Snare
    </p>
  </div>
</body>

＆＃13;

Answer 2

$(function(){
    $("#test").bind("keydown", function( event ) {
      console.log(event.which)
      //I think 97 is the character code for 'a'
      if(event.which == 65){
        $(this).addClass('test_card');
      }else{
        event.preventDefault();
       }
    });

    $('#test').focus();
});

在页面底部添加JS以加快页面显示。这可以帮助你:-)快乐的编码。

jsbin for working code：http://jsbin.com/yecequnade/edit?html,output

通过jquery向div添加按键功能

2 个答案: