Javascript(jQuery) 像菜单一样隐藏和显示 css 文件

Question

我正在尝试制作一个带有 display:none 和 display:block 的菜单。老实说，我不确定最好的方法是什么。它们必须是图像，因为它们是我在 photoshop 中使用的不同字体。这是我的 HTML。

<div id="wrap">
    <div>
        <img class="difficulty-rally"src="assets/images/difficulty-rally.png">
        <div class="difficulties">
            <img class="difficulty-easy"src="assets/images/easy-green.png">
            <img class="difficulty-medium"src="assets/images/medium-green.png">
            <img class="difficulty-hard"src="assets/images/hard-green.png">
            <img class="difficulty-insane"src="assets/images/insane-green.png">
        </div>
    </div>
</div>

这是我的CSS

@import 'reset.css';
/*///////////////////MAIN/////////////////////////*/
#wrap{
    height: 500px;
    width:  800px;
    display: block;
    margin: 0 auto;
    border: 1px solid black;
    background-color: black;
    z-index: -900000;
    position: relative;
    overflow: hidden;
}
#main{
    position: relative;
}
#header{
    height: 52px;
    width: 295px;
    margin: 0 auto;
}
.title{
    margin-top: 20px;
    height: 52px;
    width: 295px;
    background-image: url(../images/title.png);
}
.difficulty-rally{
    position: absolute;
    z-index: -1000;
}
.diificulties{
    position: absolute;
    z-index: 20;
    height: 230px;
    width: 150px;
    margin-top: 157px;
    margin-left: 335px;
}
.difficulty-easy{
    position: absolute;
    z-index: 30;
    display: none;
}
.difficulty-medium{
    position: absolute;
    z-index: 30;
    top: 62px;
    left: 2px;
    display: block;
}
.difficulty-hard{
    position: absolute;
    z-index: 30;
    bottom: 62px;
    left: 3px;
    display: none;
}
.difficulty-insane{
    position: absolute;
    z-index: 30;
    bottom: 1px;
    left: 2px;
    display: none;
}     

这是我的 JavaScript(jQuery)

$(document).ready(function(){
    $(document).on('keyup', function(e){
        if(e.keyCode === 27){
            window.location = 'minigame.php';
        }   
    })

    var easy = $('.difficulty-easy');
    var medium = $('.difficulty-medium');
    var hard = $('.difficulty-hard');
    var insane = $('.difficulty-insane');

    $(document).on('keyup', function(e){
        if(e.keyCode === 40 && medium.css('display') == "block"){
            medium.css({'display' : 'none'});
            hard.css({'display' : 'block'})
        }
        if(e.keyCode === 38 && medium.css('display') == "block"){
            medium.css({'display' : 'none'});
            easy.css({'display' : 'block'})
        }
        if(e.keyCode === 40 && easy.css('display') == "block"){
            easy.css({'display' : 'none'});
            medium.css({'display' : 'block'})
        }
        if(e.keyCode === 38 && easy.css('display') == "block"){
            easy.css({'display' : 'none'});
            insane.css({'display' : 'block'})
        }
    })

});

编辑:抱歉我忘了解释这个问题，基本上当我点击媒体时它变得疯狂而不是简单!

我知道我还没有完成一些选择，但感觉它们没有用我会在这里发布。

编辑x2:

easy.hide();
hard.hide();
insane.hide();
medium.show();

$(document).on('keyup', function(e){
    if(e.keyCode === 40 && medium.show();){
        medium.hide();
        hard.show();
    }
    if(e.keyCode === 40 && hard.show();){
        hard.hide();
        insane.show();
    }
})

回答:

    var current = 1;
    var difficulties = $('#difficulties > img');

    $(document).on('keyup', function(e){
        if(e.keyCode === 40){
            current = current + 1;
        }
        if(e.keyCode === 38){
            current = current - 1;
        }

        var selectedIndex = current % difficulties.length; //so you can click enter and do something

        if(e.keyCode === 13){
            alert($(difficulties.get(selectedIndex)).text()) //example of what you can do
        }

        $(difficulties.get(current % difficulties.length)).show().siblings().hide();
    })

});

Answer 1

使用 JQuery，您可以使用 .hide() 来隐藏内容，使用 .show() 来显示它们，而不是乱用 css

将您的 keyup 处理程序更改为:

var current = 1;
var difficulties = $('#difficulties > img');


$(document).on('keyup', function(e){
    if(e.keyCode === 40){
        current = current + 1;
    }
    if(e.keyCode === 38){
        current = current - 1;
    }

    var selectedIndex = current % difficulties.length; //so you can click enter and do something

    if(e.keyCode === 13){
        alert($(difficulties.get(selectedIndex)).text()) //example of what you can do
    }

    $(difficulties.get(current % difficulties.length)).show().siblings().hide();
})