html属性不适用于js和jquery

Question

我试图在键盘上按下各个键时选择具有键类的div。

我同时尝试了JavaScript和jQuery，但是它不起作用并且显示空输出。

按下键后如何选择特定数据属性的div？

请参见下面的代码：

html

<div class="row-2">
    <div data-key="65" class="keys">
      <kbd>A</kbd>
    </div>
</div>

Js

    window.addEventListener('keydown',function(e){
      const here = document.querySelector('.keys[data-key="${e.keycode}"]');
      console.log(here);     
      });

---

jQuery

    $(document).ready(function(){
       $('html').on('keydown',function(event){
       var press = event.which;
       console.log(press);
       console.log(document.querySelector('.keys[data-key="${press}"]'));
       });

}）;

Answer 1

您快到了！只需将attribute selector与值为press的值一起使用即可。

以下演示突出显示了按下的键。

$(document).ready(function() {
  $('html').on('keydown', function(event) {
    var press = event.which;
    $(`div[data-key=${press}]`).addClass('highlight');
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-2">
  <div data-key="65" class="keys">
    <kbd>A</kbd>
  </div>
  <div data-key="66" class="keys">
    <kbd>B</kbd>
  </div>
  <div data-key="67" class="keys">
    <kbd>C</kbd>
  </div>
</div>

Answer 2

您为插值使用了错误的字符串文字：

'。keys [data-key =“ $ {e.keycode}”]'应为`.keys [data-key =“ $ {e.keycode}”]`

Answer 3

只需为此.keys[data-key="${press}"]更改此.keys[data-key="' + press + '"]