如何獲得左右箭頭鍵以使用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; 
     }); 
    }); 
});