입력 상자 키까지 확인 (검증)

Question

내 배열

var foo = {}; 
    foo['xarr'] = [ "23" ]; 
    foo['yarr'] = [ "21","21","22","23","24"]; 
    foo['zarr']= [ "70","71","72","73","74","75" ]; 

입력 상자가 최대 4 문자를 받아 나는 사용자가 처음 견인 문자를 입력 할 때 원하는 배열 객체 을하고 내가 원하는 배열에서 일치 div에 클래스를 추가합니다. foo [ 'xarr']에서 일치하면 foo [ 'yarr']에서 일치하는 일부 다른 클래스를 추가하고 다른 클래스를 추가합니다.

<li class="Images"> 
    <div> 
     <input type="text" name="cnumber1" class="inputBx" style="width:58px;" maxlength="4" size="4"/>    
    </div> 
    <span class="test"></span> 
</li> 

자바 스크립트

나는이 방법을 시도했지만 어떤 성공을 내가 코드에서 이해가 안

$('.inputBx').keydown(function() { 
     var inputVal = $(this).val(), 
      iLen = inputVal.length; 
      if(iLen >= 2){ 
       for(var key in foo) { 
        if(foo[key].indexOf(inputVal) >= 0){ 
         if(foo[key] == 'xarr') 
          $('.Images .test ').addClass('fullOpactiy'); 
         if(foo[key] == 'yarr') 
          $('.cardImages .test ').addClass('fullOpactiy'); 
         if(foo[key] == 'zarr') 
          $('.Images .test ').addClass('fullOpactiy'); 
        } 
       } 
      } 
     }); 

Answer 1

뭔가를 얻을 수 didnt는 :

내 HTML 마크 업

for(var key in foo) { 
    if(foo[key].indexOf(inputVal) >= 0){ 
     if(foo[key] == 'xarr'){ 
      //... 
     } 
    } 
} 

키가 foo 객체에 있으므로 xarr, yarr 또는 zar 중 하나입니다. 그런 다음 foo [key]는 숫자 배열입니다 (이 문장은 귀하의 문장 foo[key].indexOf(inputVal) >= 0을 수정합니다). 왜 foo[key]이 문자열 'xarr'또는 'yarr'과 같을까요? 나는 당신의 연구를 계속하기 전에이 수정 제안 :

for(var key in foo) { 
    var idx = foo[key].indexOf(inputVal); //search in the array 
    if( idx >= 0){ 
     if(key == 'yarr'){ 
      $('.cardImages .test ').addClass('fullOpactiy'); 
     } 
     else{ 
      $('.Images .test ').addClass('fullOpacity'); 
     } 
     return true;//ends your search now, no need to continue 
    } 
} 

내가이 매칭 알고리즘이 최적이라고 생각을하지만,이 여기에 나를 위해 일하는 것입니다

환호

에게

Grooveek

Answer 2

작동합니다 working demo

var foo = []; 
foo['xarr'] = ["23"]; 
foo['yarr'] = ["21", "21", "22", "23", "24"]; 
foo['zarr'] = ["70", "71", "72", "73", "74", "75"]; 


$('.inputBx').keyup(function() { 
    var inputVal = this.value; 
    iLen = inputVal.length; 
    if (iLen >= 2) { 
     if ($.inArray(inputVal, foo['xarr']) >= 0) { 
      $('.Images, .test').addClass('fullOpactiy') 
     } 
     if ($.inArray(inputVal, foo['yarr']) >= 0) { 
      $('.cardImages, .test').addClass('fullOpactiy') 
     } 
     if ($.inArray(inputVal, foo['zarr']) >=0) { 
      $('.Images, .test').addClass('fullOpactiy') 
     } 
    } 
});