If条件取决于css

if condition depending on css

本文关键字：css 取决于 条件 If      更新时间：2023-09-26

我有一个问题已经困扰了我一天了，我不能把它做好。我有几个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
}

我想要的是，当你按下，背景图像更新到一个新的图像(这是有效的)，然后与新的背景活动，我希望能够按下回车去一个url(这不起作用)。例子:

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条件有效，但如果我将其更改为另一个图像，则什么也不会发生。不幸的是，我无法添加所有的图像，但我已经创建了一个小提琴供参考。我将非常感谢任何帮助在正确的方向!

小提琴

尝试:

        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/

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

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/

相关文章：