0

display：noneとdisplay：blockでメニューを作成しようとしています。正直なところ、これを行うための最良の方法はわかりません。それらは私がフォトショップで使用している別のフォントであるため、画像である必要があります。これは私の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'})
        }
    })

});

編集：申し訳ありませんが、問題を説明するのを忘れました。基本的に、メディアをクリックすると、簡単ではなく異常になります。

いくつかの選択が終わっていないことは知っていますが、それらが機能していないと感じます。ここに投稿します。

EDITx2：

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();
    })

});
4

1 に答える 1

-1

JQueryを使用すると、cssをいじる代わりに、.hide()物事を非表示にしたり表示したりすることができます。.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();
})
于 2013-02-18T07:30:48.407 に答える