jQueryで左右の矢印キーを操作するにはどうすればよいですか？

Question

jQueryを使用してこの状況で左右の矢印キーを動作させるにはどうすればよいですか？

ところで

$(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; 
      }); 
    }); 
}); 

、でもkeyupを使用してみましたし、同じ問題を取得...

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

使用​​またはkeyup。 Keypressイベントリスナーは、非文字キー（keypressの矢印キーのキーコードはゼロ）を認識しません。偶然、別の質問のための矢印キースクリプトを書いたばかりです。 http://jsfiddle.net/ATUEx/（Question）

注：

は、このキーコードスクリプトの例のためのフィドルを参照してください elseif有効なJavaScript式ではありません：私は別のエラーが見つかりました（固定）しました。代わりに 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; 
     }); 
    }); 
});