使用.keydown()返回div id?

时间:2018-06-01 20:54:02

标签: javascript jquery keycode

我不确定我是否正确地表达了这一点,但我想要做的是让一个函数返回一个div的id。 keydown事件。

说我的HTML是:

<div class="pad" id="snare" data-key="97"></div>
<div class="pad" id="kick" data-key="98"></div>

基本上我希望我的JS做这样的事情:

function handlekeydown(e) {
    console.log("data-key: " + e.keyCode);
    if (e.keycode == $(".pad").data("key")) {
        return this.id
    }
}

我可以写一个switch语句,每个keycode返回一个与id同名的变量,但这样做会使我在HTML中失去它的目的。

我如何编写一个函数来搜索div中与data-key匹配的keycode,然后返回其ID?

2 个答案:

答案 0 :(得分:0)

根据问题

function handlekeydown(e) {
    var id;
    var element = $('[data-key="' + e.keyCode + '"]');
    if (element.length) {
        id = element[0].id;
    }
}

您可以通过以下方式完成:

function processId(id) {
    console.log(id);
}

function handlekeydown(e) {
    var element = $('[data-key="' + e.keyCode + '"]');
    if (element.length) {
        processId(element[0].id);
    }
}

但如上所述,您无法从处理程序返回id,您可能想从使用id的事件处理程序中调用一个方法。

  import React from 'react';
  import { render } from 'react-dom';
  import Hello from './Hello';
  import {Cookies}  from 'react-cookie';

  const App = () => (
    <div style={styles}>
      <Hello name="CodeSandbox" />
      <button onClick={()=>{
        const rcookie = new Cookies()
        console.log("clicked")
        rcookie.set('name', 'vivek', { path: '/' });
        console.log(rcookie.get('name'))
        }}> set cookie </button>
      <h2>Start editing to see some magic happen {'\u2728'}</h2>
    </div>
  );

  render(<App />, document.getElementById('root'));

答案 1 :(得分:0)

keydown事件是键盘事件。

keydown事件只会触发文档的当前 activeElement

您需要一种完全不同的方法 - 如果您决定使用可能真正适用于更改的内容更改当前方法,我将提出解决方案建议。

p.s。:我将更新同样的答复。