我有一项调查,其中有许多文本输入采用数值,每个文本输入都有一对递增/递减按钮。我的工作功能如下:
HTML:
<div class="text-input-wrapper">
<input type="text" />
<div class="buttons inc-dec">
<button class="increment">Increment</button>
<button class="decrement">Decrement</button>
</div>
</div>
function incDec(btnClass) {
var input = $(this).closest('.text-input-wrapper').find('input');
var inputVal = $(this).closest('.text-input-wrapper').find('input').val();
if ($(this).hasClass('increment')) {
if (inputVal.length == 0) {
($(input).val('1'));
}
else {
inputVal++;
$(input).val(inputVal);
}
} // increment
else if ($(this).hasClass('decrement')) {
if (inputVal.length == 0) {
($(input).val('0'));
}
else {
inputVal--;
$(input).val(inputVal);
}
} // decrement
return false;
} // function incDec
现在我需要使用向上和向下键启用递增和递减值;我尝试了以下内容,但没有感到高兴:
$(document).keydown( function(eventObject) {
// UP arrow
if(eventObject.which==38) {
var btnClass = "increment";
} else
// DOWN arrow
if(eventObject.which==40) {
var btnClass = "decrement";
}
incDec(btnClass);
我非常感谢有关如何使用向上/向下键触发增量/减量的一些说明,
提前非常感谢,
svs
最佳答案
您的问题是您的 incDec
函数未设计为将类作为输入参数 - 它使用调用事件(即按钮上的单击事件)的对象。
这有点hacky,但是像下面这样怎么样?您将点击处理程序分配给每个按钮,然后调用相关按钮的点击事件。
$( function ( ) {
$('button').click( incDec );
$('input').keydown( function(eventObject) {
// UP arrow
if(eventObject.which==38) {
var btnClass = "increment";
} else
// DOWN arrow
if(eventObject.which==40) {
var btnClass = "decrement";
}
// Invoke the click event for the inc/dec button inside the containing div.
$('button.'+btnClass, $(this).parent( )).click( );
});
});
这是一个带有两个这样的盒子的jsfiddle。当您在文本框中使用向上/向下箭头键时,它会正确递增/递减。 http://jsfiddle.net/zJBEN/
关于javascript - 使用向上/向下箭头键调用函数(并传递参数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13034633/