javascript - 为什么每个按钮只能工作一次？

Question

我正在尝试为我创建的一些 flash 横幅创建一个 div 导航。我写的代码按升序运行，但是一旦你点击过去的一个，就不能返回。我如何让它像导航一样，可以按任何顺序重复点击每个标题并且它会起作用？

fiddle 在这里: http://jsfiddle.net/0fq19a80/ 代码在这里:

HTML

   <h3 id="black120">120x600</h3> <h3 id="black160">160x600</h3> <h3 id="blackMPU">300x250</h3> <h3 id="black728">728x90</h3> <h3 id="black300">300x600</h3> <h3 id="black970">970x250</h3>

            <div id="main">
        <div id="allPages">
        <div id="page1" class="current">
            <h1>PAGE1</h1>
        </div>
        <div id="page2">
            <h1>PAGE2</h1>
        </div>

        <div id="page3">
            <h1>PAGE3</h1>
        </div>

        <div id="page4">
            <h1>PAGE4</h1>
        </div>

        <div id="page5">
            <h1>PAGE5</h1>
        </div>

        <div id="page6">
            <h1>PAGE6</h1>
        </div>
        </div>
        </div>`

CSS

#main {
margin-left: 100px;
width: 1000px;
height: 700px;
border: 1px solid red;
overflow: hidden;
position: absolute;
top: 200px;
}

#allPages > div {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

#allPages > div.current {
display: block;
}

#page1 {
width: 1000px;
height: 700px;
background-color: red;
}

#page2 {
width: 1000px;
height: 700px;
background-color: grey;
}

#page3 {
width: 1000px;
height: 700px;
background-color: pink;
}

#page4 {
width: 1000px;
height: 700px;
background-color: green;
}

#page5 {
width: 1000px;
height: 700px;
background-color: orange;
}

#page6 {
width: 1000px;
height: 700px;
background-color: blue;
}

JS

$(document).ready(function(){
    $("#black120").click(function(){
            nextPage("#page1","fade");
    });

    $("#black160").click(function(){
            nextPage("#page2","fade");
    });

    $("#blackMPU").click(function(){
            nextPage("#page3","fade");
    });

    $("#black728").click(function(){
            nextPage("#page4","fade");
    });

    $("#black300").click(function(){
            nextPage("#page5","fade");
    });

    $("#black970").click(function(){
            nextPage("#page6","fade");
    });
});

function nextPage(to, type){ 
var to = $(to),
    from = $("#allPages .current");

to
.addClass("current " + type + " in")
.one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function(){
  from.removeClass("current " + type + " out" );
  to.removeClass(type + " in");
});
from.addClass(type + " out ");
}

Answer 1

在将其添加到下一个页面之前，您需要从 from 页面中删除 current 类。 from.removeClass() 将完成这项工作:

function nextPage(to, type) {
    var to = $(to),
        from = $("#allPages .current");

    from.removeClass();
    to.addClass("current " + type + " in").one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function () {
        from.removeClass("current " + type + " out");
        to.removeClass(type + " in");
    });
    from.addClass(type + " out ");
}

演示:http://jsfiddle.net/0fq19a80/2/