-1

任意のキーを押すと、最初の div "d1" を表示する必要があります。他は非表示にして、任意のキーをもう一度押します。2 番目の div "d2" を表示します。他のキーを非表示にして、任意のキーをもう一度押します。3 番目の div "d3" を表示します。他は非表示にします。 ..プロセスをもう一度繰り返さない。

<div class="objects" id="d1">
    <img src="images/d1.jpg" />
</div>

<div class="objects" id="d2">
    <img src="images/d2.jpg" />
</div>

<div class="objects" id="d3">
    <img src="images/d3.jpg" />
</div>

....... 
.......

<div class="objects" id="d6">
    <img src="images/d6.jpg" />
</div>

任意のキーを押すと、1 番目の div を表示する必要があり、次に任意のキーを押して 2 番目の div を表示し、6 番目の div まで表示します。

javascriptでそれを行う方法は？

4

2 に答える 2

0

これを試してみてください

var currentVisible = 0;
document.onkeyup = function() {
    // First hide all by class 'objects'
    // Requires IE9+ FF3+, others are supported
    var objs = document.getElementsByClassName('objects');
    for (var i=0; i<objs.length; i++) {
        objs[i].style.display = 'none';
    }
    // Show the one we are supposed to show
    if (++currentVisible == 7) 
        currentVisible = 1;
    var el = document.getElementById('d' + currentVisible);
    el.style.display = 'block';
}

私はフィドルATMにアクセスできないため、100％テストされていません。

于 2013-07-11T11:36:45.883 に答える
0 
<html>
<head>
<style type="text/css">
    .Div
    {
        display: none;
    }
</style>
<script type="text/javascript">



    var i = 0;
    function KeyHandler() {
        i++;
        var divs = document.getElementsByClassName("Div");

        for (var div = 0; div < divs.length - 1; div++) {

            divs[div].style.display = 'none';
        }
        var ele = document.getElementById("d" + i);
        ele.style.display = "block";

    }

</script>
</head>
<body onkeyup="KeyHandler()">
Press any key..
<div id="d1" class="Div">
    <h5>
        Div1</h5>
</div>
<div id="d2" class="Div">
    <h5>
        Div2</h5>
</div>
<div id="d3" class="Div">
    <h5>
        Div3</h5>
</div>
<div id="d4" class="Div">
    <h5>
        Div4</h5>
</div>
<div id="d5" class="Div">
    <h5>
        Div5</h5>
</div>
<div id="d6" class="Div">
    <h5>
        Div6</h5>
</div>
</body>
</html>
于 2013-07-11T12:07:04.970 に答える