javascript - 如何使用javascript显示div多步？

Question

如何使用javascript显示多步div？

我想为

创建代码

第一次点击 CLICK HERE 会显示 one

第二次点击 CLICK HERE 会显示 two

第三次点击 CLICK HERE 将显示 three

第四次点击 CLICK HERE 将显示 four

第五次点击 CLICK HERE 将显示 five

http://jsfiddle.net/x53eh96o/

<style type="text/css">
    div{
    display: none;
}
  </style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
function myFunction() {
    document.getElementById("1").style.display = "block";
}
</script>

我该怎么做？

谢谢

Answer 1

首先，最好在你的div中添加一个通用类，以便于选择。然后你应该按类名选择所有需要的 div，并通过它们中的每一个，设置需要的可见性。

http://jsfiddle.net/x53eh96o/7/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = document.getElementsByClassName("some_class");
        var divsLength = divs.length;
        for(var j = divsLength; j--;) {
            var div = divs[j];              
            div.style.display = (i == j ? "block" : "none"); 
        }          
        i++;
        if(i > divsLength) {
            i = 0; // for a cycle
        }

    }
</script>

更新

这里是 jquery 示例:http://jsfiddle.net/x53eh96o/8/

<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var i = 0;
    function myFunction() {
        var divs = $(".some_class");
        divs.hide().eq(i).css({display: 'block'});       
        i++;
        if(i > divs.length) {
            i = 0;
        }
    }
</script>