왼쪽 및 오른쪽 화살표 키를 jQuery와 함께 사용하려면 어떻게해야합니까?

Question

이 상황에서 jQuery를 사용하여 왼쪽 및 오른쪽 화살표 키를 작동 시키려면 어떻게해야합니까? 심지어 keyup를 사용하여 시도와 같은 문제를 얻을 그런데

$(document).ready(function() 
{ 
    $('#container').click(function() 
    { 
     var totalWidth = 0; 
     var sizeWidth = $('#insertData1').outerWidth(); 
     $('#ul_a li').each(function() 
      { 
       var widthS = $(this).width(); 
       var textW = $(this).text(); 

       var widthN = parseInt(widthS,10); 
       if((totalWidth + widthN) < sizeWidth) 
       { 
        totalWidth = totalWidth + widthN; 
        $('#ul_b').append('<li>' + textW + '</li>'); 
       } 
       else 
       { 
        return false; 
       } 
      }); 

     $('#ul_b li').hover(function() 
      { 
       $(this).addClass('highlight'); 
      }, function() 
      { 
       $(this).removeClass('highlight'); 
      }); 

     $('#ul_b li').keypress(function(e) 
      { 
       if(e.which == 37) 
       { 
        $(this).removeClass('highlight'); 
        $(this).prev().addClass('highlight'); 
       } 
       elseif(e.which == 39) 
       { 
        $(this).removeClass('highlight'); 
        $(this).next().addClass('highlight'); 
       } 
       return false; 
      }); 
    }); 
}); 

, ...

$('#ul_b li').keyup(function(e)   
    {     
     if(e.keyCode == 37)    
     {     
      $(this).removeClass('highlight');     
      $(this).prev().addClass('highlight');    
     } 
     elseif(e.keyCode == 39)    
     {     
      $(this).removeClass('highlight');     
      $(this).next().addClass('highlight');    
     }     
     return false; 
    }); 

Answer 1

사용 keydown 또는 keyup. Keypress 이벤트 리스너는 문자가 아닌 키를 인식하지 못합니다 (keypress에있는 화살표 키의 키 코드는 0입니다). 우연히도, 나는 또 다른 질문을 위해 화살표 키 스크립트를 작성했습니다. http://jsfiddle.net/ATUEx/ (Question)

참고 :

이 키 코드 스크립트의 예를 들어 바이올린을 참조 elseif 유효한 자바 스크립트 표현되지 않습니다 : 내가 또 다른 오류가 발견 (고정)했습니다. 대신 else if (사이에 공백이있는 else 및 if)을 사용하십시오.

---

귀하의 고정 코드 :

$(document).ready(function() 
{ 
    $('#container').click(function() 
    { 
     var totalWidth = 0; 
     var sizeWidth = $('#insertData1').outerWidth(); 
     $('#ul_a li').each(function() 
      { 
       var widthS = $(this).width(); 
       var textW = $(this).text(); 
       var widthN = parseInt(widthS,10); 
       if((totalWidth + widthN) < sizeWidth) 
       { 
        totalWidth = totalWidth + widthN; 
        $('#ul_b').append('<li>' + textW + '</li>');    
       } 
       else 
       { 
        return false;    
       } 
      }); 

     $('#ul_b li').hover(function() 
      { 
       $(this).addClass('highlight'); 
      }, function() 
      { 
       $(this).removeClass('highlight'); 
      }); 

     $('#ul_b li').keydown(function(e) 
     { 
      if(e.which == 37) 
      { 
       $(this).removeClass('highlight'); 
       $(this).prev().addClass('highlight'); 
      } 
      else if(e.which == 39) 
      { 
       $(this).removeClass('highlight'); 
       $(this).next().addClass('highlight'); 
      } 
      return false; 
     }); 
    }); 
});