javascript - 使用向上/向下箭头键调用函数(并传递参数)

Question

我有一项调查，其中有许多文本输入采用数值，每个文本输入都有一对递增/递减按钮。我的工作功能如下:

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

Answer 1

您的问题是您的 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/