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/（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;
        });
    });
});

如何使用左箭头键和右箭头键来使用jQuery？

1 个答案: