Question

我有一个问题困扰了我一天，我无法做对。我有几个keydown函数，如果没有使用类'active'，它会在某些状态下更改背景图像。像这样：

if ($('li').hasClass('active')) {
        letterIndex = letterIndex + 1;
        $(this).html(letters[letterIndex]);
}
else {
        $('.content').css("background-image", "url(img/screen-back.jpg)"); 
        $('li').blur(); // remove focus
}

我想要的是，当你按下时，背景图像会更新为新图像（这样可行），然后在新背景处于活动状态时，我希望能够按回车键转到网址（这个不起作用）。例如：

case key.enter:
    if (letterIndex == 0 && $(this).hasClass('active')) {
        $(this).prev().remove();
    }
    else if ($('.content').css('background-image') === 'url(img/screen-default.jpg)') {
        // go to url
    }                           
    else {                              
        $(this).closest('li').toggleClass('active');
    }
    break;

如果默认背景图像处于活动状态，则if条件有效，但如果我将其更改为其他图像，则不会发生任何事情。不幸的是我无法添加所有图像但我已经创建了一个小提琴供参考。我会非常感谢在正确的方向上提供任何帮助！

Fiddle

Answer 1

尝试：

        var letters = [
                        '<','.',',',';',':',                    
                        'a','b','c','d','e','f','g','h','i','j',
                        'k','l','m','n','o','p','q','r','s','t',
                        'u','v','w','x','y','z',       
                        'A','B','C','D','E','F','G','H','I','J',
                        'K','L','M','N','O','P','Q','R','S','T',
                        'U','V','W','X','Y','Z',
                        '1','2','3','4','5','6','7','8','9','0'
                      ];


      $('li:first').focus().addClass('active');
$('li').on('click', function(e){
    $('li').removeClass('active');
    $(this).addClass('active');
})
        $('li').on('keydown', function(e) {

        e.preventDefault();

        var keyCode = e.which;
            key = {up: 38, down: 40, right: 39, left: 37, enter: 13};

                letterIndex = letters.indexOf($(this).text());
                switch(e.which) {
                    case key.up:
                        if ($('li').hasClass('active')) {
                            letterIndex = letterIndex + 1;
                            $(this).html(letters[letterIndex]);
                        }else {
                            $('.content').css("background-image", "url(img/screen-back.jpg)"); 
                            $('li').blur(); // remove focus
                        }
                        break;

                     case key.down:
                        if ($('li').hasClass('active')) {
                            letterIndex = letterIndex - 1;
                            $(this).html(letters[letterIndex]);
                        }else {
                            $('.content').css("background-image", "url(img/screen-check.jpg)"); 
                            $('li').blur(); // remove focus
                        }
                        break;

                      case key.right:
                        // check if li is not active, then move right
                        if ($('li').hasClass('active')) {
                            $('li:focus').removeClass('active');
                            $('li:focus').closest('li').next().focus().addClass('active');
                        } else if ($('li:last-child').is(':focus')) {
                            $('.content').css("background-image", "url(img/screen-check.jpg)"); 
                            $('li').blur(); // remove focus
                        }
                        break;

                       case key.left:
                        // check if li is not active, then move left
                        if ($('li').hasClass('active')) {
                            $('li:focus').removeClass('active');
                            $('li:focus').closest('li').prev().focus().addClass('active');

                        }else {
                            $('.content').css('background-image', 'url(img/screen-back.jpg)'); 
                            $('li').blur(); // remove focus
                        }
                        break;

                        case key.enter:
                        // check if the first item in array is chosen and active and delete
                        if (letterIndex == 0 && $(this).hasClass('active')) {
                            $(this).prev().remove();
                        }else if ($('.content').css('background-image', 'url(img/screen-default.jpg)')) {
                            alert('yes');
                        }else {
                            $(this).closest('li').toggleClass('active');
                        }
                        break;
                    }
            });

http://jsfiddle.net/a91p86wv/7/

Answer 2

使用焦点事件检查内部上下键事件。

if ($(this).is(':focus')) {
    letterIndex = letterIndex + 1;
    $(this).html(letters[letterIndex]);
}else {
    $('.content').css("background-image", "url(img/screen-back.jpg)"); 
    $('li').blur(); // remove focus
}

这是你想做的吗？ http://jsfiddle.net/a91p86wv/5/

如果条件取决于CSS

2 个答案: