使用向上/向下箭頭鍵調用函數（並傳遞參數）

我有一個調查，其中有許多文本輸入採取數值，其中每個有一對增量/減量按鈕。我有一個工作的功能如下：使用向上/向下箭頭鍵調用函數（並傳遞參數）

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

現在我需要啓用遞增和使用UP & DOWN鍵遞減值;我參加了一個刺有以下但沒有喜悅：

$(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

來源

2012-10-23 shecky

謝謝男士們。我已經編輯了我的問題，因爲實際上我確實擁有了帶有btnClass參數的incDec函數。仍然沒有喜樂;我特別newb re：傳遞參數/參數等 – shecky

你的親瑕疵是你的incDec函數沒有被設計爲將類作爲輸入參數 - 它使用調用事件的對象（即，按鈕上的點擊事件）。

這有點不好意思，但下面的東西怎麼樣？您將點擊處理程序分配給每個按鈕，然後調用相關按鈕的點擊事件。

$(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/

來源

2012-10-23 16:11:23 n00dle

Thx伊恩，但添加你的功能，我的箭頭鍵和按鈕遞增/遞減2.我仍然在黑客攻擊它，但這不是我的領域，所以信心是中低 - 乾杯，svs – shecky

你能告訴我你使用的代碼，因爲它在JSfiddle中工作正常，所以我想知道是否有東西被調用兩次。 – n00dle

是的男人有東西被稱爲兩次因爲我分開了;）..刪除我的Click語句解決了它。然而，我發現了另一個問題，雖然與我的問題或答案無關：當鍵入時，FF顯示數字的形式歷史記錄，不匹配滾動輸入值的位置。無論如何，非常感謝，我想我可以通過這種方式發貨。非常感激！ – shecky

試試這個：

$(document).keypress(function(eventObject) { 
    var key = (eventObject.keyCode ? eventObject.keyCode : eventObject.which); 
    if(key==38) { 
     var btnClass = "increment"; 
    } else 
    // DOWN arrow 
    if(key==40) { 
     var btnClass = "decrement"; 
    } 
    incDec(btnClass); 
});

來源

2012-10-23 16:11:10

'incDec'沒有設置爲將類作爲參數 - 它使用事件調用者的類，所以我不認爲這會起作用。 – n00dle

@ianhales - 是的我只是看到了你的帖子 - 我要離開我的辦公桌 - 但是當我回來的時候，我會更多地關注它 - 如果它不起作用，我會刪除它 –

@ZacharyKniebel謝謝扎克，幫助我進入區域，歡呼。 – shecky

使用向上/向下箭頭鍵調用函數（並傳遞參數）

回答

相關問題