Question

我有一些代码，其中箭头键向下触发。但是我想要相同的代码但是使用另一个var并且箭头键的状态保持在箭头键的状态下。我在这个代码中有2个div，它是一个用css绘制的条形图。按住箭头键时，您会看到值正在变化。我想要相同的但是还有另外两个div的左箭头键。如何添加该代码，两者都有效。

var changeIdValue = function () {
 var current = document.getElementById('balklongwaarde').clientHeight - 15 + 'px';
'use strict'
document.getElementById('balklongwaarde').style.height = current;
var current = document.getElementById('balklevensverwachting').clientHeight - 7.5 + 'px';
'use strict'
document.getElementById('balklevensverwachting').style.height = current;
};

var intervalID;

 //through arrow down values are changing//
window.onkeydown = function(e){
if(e.keyCode == 40){
    if(typeof intervalID == 'undefined') {
        intervalID = window.setInterval(changeIdValue, 10);       
    }
};



//through arrow down values are changing//
 window.onkeyup = function(e){
if(e.keyCode == 40){
    window.clearInterval(intervalID);
    intervalID= undefined;

 }
};
}

http://jsfiddle.net/MhTU9/ 在jsfiddle中我添加了左箭头键的代码，但它不起作用

Answer 1

您需要使用addEventListener来绑定多个回调。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Demo

代码DRY版本。

function bind(callback, keyCode) {
    var interval;
    window.addEventListener('keydown', function(e){
        if(e.keyCode === keyCode) {
            if(typeof interval === 'undefined') {
                interval = setInterval(callback, 10);
            }
        }
    }, false);
    window.addEventListener('keyup', function(e){
        if(e.keyCode === keyCode) {
            interval = clearInterval(interval);
        }
    }, false)
}

bind(changeIdValue, 37);
bind(changeWaarde, 40);

如何将两个不同箭头键的代码与两个不同的变量组合起来？

1 个答案: