如何簡化此jQuery腳本？

我有一個ASP.NET Web窗體項目，我試圖實現自動標籤。我是新來jquery，但我發現一個代碼片斷在線做自動標籤，我想用它來自動標籤多組文本框。如何簡化此jQuery腳本？

例如：

Textbox1 -> Textbox2 -> Textbox3 

Textbox4 -> Textbox5 -> Textbox6

但不是：

Textbox3 -> Textbox4

希望是有道理的。無論如何，我有以下代碼：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".autotab").keyup(function() { 
      if ($(this).attr("maxlength") == $(this).val().length) { 
       var index = $(".autotab").index(this); 
       var item = $($(".autotab")[++index]); 
       if (item.length > 0) 
        item.focus(); 
      } 
     }); 
     $(".autotab2").keyup(function() { 
      if ($(this).attr("maxlength") == $(this).val().length) { 
       var index = $(".autotab2").index(this); 
       var item = $($(".autotab2")[++index]); 
       if (item.length > 0) 
        item.focus(); 
      } 
     }); 
    }); 
</script> 

<input name="tbOne" type="text" maxlength="3" id="tbOne" class="autotab" /> 
<input name="tbTwo" type="text" maxlength="3" id="tbTwo" class="autotab" /> 
<input name="tbThree" type="text" maxlength="4" id="tbThree" class="autotab" /> 

<input name="tbFour" type="text" maxlength="3" id="tbFour" class="autotab2" /> 
<input name="tbFive" type="text" maxlength="3" id="tbFive" class="autotab2" /> 
<input name="tbSix" type="text" maxlength="4" id="tbSix" class="autotab2" />

我如何重構的複製/粘貼代碼到一個單一的功能？

來源

2012-10-23 ConditionRacer

一個更普遍的解決方案，不需要你使用每組一類：

// loop through adjacent pairs 
$.fn.eachPair = function(f) { 
    for(var i = 0, j = 1; j < this.length; i = j++) 
     f.call(this[i], this[j]); 
} 

$.fn.autotab = function() { 
    this.eachPair(function(next) { 
     // add an event handler to focus the next field 
     $(this).keyup(function() { 
      if($(this).attr("maxlength") == $(this).val().length) 
       $(next).focus(); 
     }); 
    }); 
} 

$(document).ready(function() { 
    $(".autotab").autotab(); 
    $(".autotab2").autotab(); 
});

^{作爲一個方面說明，在代碼中$($(".autotab2")[++index])會更好寫成$(".autotab2").eq(index + 1)}

來源

2012-10-23 18:13:25 Eric

@ user1689607：非常好的問題。我已經完全改變了我的回答 – Eric

您正遇到*「閉環中的問題」*問題。最簡單的解決方案可能是使用'.each（）'。返回'var els = this; return this.each（function（i，el）{...}）;' –

@ user1689607：每個都不能在這裏工作... – Eric

您可以通過將選擇器傳入.next（）來限制元素 - 這是假設您只有一個類分配給您的輸入，並且它們都是兄弟。

// get all inputs with class that start with autotab 
$("input[class^=autotab]").keyup(function() { 
    var $el = $(this); 
    // get nextfield with same class 
    var nextField = $el.next('.'+$el.attr('class')); 
    if($el.attr("maxlength") == $el.val().length){ 
     // if true - give next field with same class focus 
     $el.next().focus(); 
    } 
});

http://jsfiddle.net/JaVaR/

或者，如果他們不能保證兄弟姐妹..你可以使用.EQ（）由一個獲取當前指數和增量。這將讓符合潮流元素類元素的集合，然後獲取當前的索引來查找下一個字段

$("input[class^=autotab]").keyup(function() { 
    var $el = $(this); 
    // gets all inputs with same class 
    var $inp = $('.'+$el.attr('class')); 
    // gets next input with same class 
    var nextField = $inp.eq($inp.index(this)+1); 
    if($el.attr("maxlength") == $el.val().length){ 
     nextField.focus(); 
    } 
});

http://jsfiddle.net/L4MEP/

來源

2012-10-23 18:27:23

如何簡化此jQuery腳本？

回答

相關問題