如何让左右方向键与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

使用keydown或keyup。Keypress事件监听器不识别非字符键(keypress箭头键的键代码为零)。凑巧的是，我刚刚为另一个问题写了一个箭头键脚本。

请参阅此提琴的关键代码脚本示例:http://jsfiddle.net/ATUEx/(问题)

注意:我发现(并修复)另一个错误: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;
        });
    });
});