Javascript导致div交替两个类卡住

时间：2016-02-02 04:21:21

标签： javascript css html5

我有一个函数可以通过使用JS设置类名来移动框。问题是，不知何故，正确的类在正确的时间设置，但div在原始类和新类之间交替...每秒。我会尝试在这里发布小提琴链接。页面上有四个框，单击一个成功将其他三个框翻译到左侧，然后展开选中的框。这部分工作正常。问题是当我点击一个左框时，其中一个展开了。扩展的那个开始转换到新类，但后来开始回到扩展位置......然后永远来回。我已经尝试从div中清除所有类然后进行翻译。我相信JS有一个设计规则我不见了？我没有尝试改变阶级斗争。

HTML： 

<section id="content">
    <div id="firstBox" class="firstBox" onclick="firstBoxController()">
        2000-2005
    </div>
    <div id="secondBox" class="secondBox" onclick="secondBoxController()">
        2005-2010
    </div>
    <div id="thirdBox" class="thirdBox" onclick="thirdBoxController()">
        2010-2015
    </div>
    <div id="fourthBox" class="fourthBox" onclick="fourthBoxController()">
        2015-2020
    </div>
    <div id="firstSub"  class="hidden"></div>
    <div id="secondSub" class="hidden"></div>
    <div id="thirdSub"  class="hidden"></div>
    <div id="fourthSub" class="hidden"></div>
</section>

JS： 

//var declarations
var first     = document.getElementById("firstBox");
var firstSub  = document.getElementById("firstSub");
var second    = document.getElementById("secondBox");
var secondSub = document.getElementById("secondSub");
var third     = document.getElementById("thirdBox");
var thirdSub  = document.getElementById("thirdSub");
var fourth    = document.getElementById("fourthBox");
var fourthSub = document.getElementById("fourthSub");

//movement functions
function firstLeft() {
    first.className = "firstLeft";
}

function firstExpand() {
    first.className = "expand";
    firstSub.className = "translateRight";
}

function secondLeft() {
    second.className = "secondLeft";
}

function secondExpand() {
    second.className = "expand";
    secondSub.className = "translateRight";
}


function thirdLeft() {
    third.className = "thirdLeft";
}

function thirdExpand() {
    third.className = "expand";
    thirdSub.className = "translateRight";
}


function fourthLeft() {
    fourth.className = "fourthLeft";
}

function fourthExpand() {
    fourth.className = "expand";
    fourthSub.className = "translateRight";
}

//controller functions

function firstBoxController() {

    if (first.classList.contains("firstBox")) {
        secondLeft();
        thirdLeft();
        fourthLeft();
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(firstExpand, 1000);
}

function secondBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("secondBox")) {
        firstLeft();
        thirdLeft();
        fourthLeft();
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(secondExpand, 1000);
}

function thirdBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("thirdBox")) {
        firstLeft();
        secondLeft();
        fourthLeft();
    }

    if (fourth.classList.contains("expand")) {
        fourth.className = "";
        fourth.className = "fourthCenter";
        fourthSub.className = "hidden";
        window.setInterval(fourthLeft, 1000);
    }

    window.setInterval(thirdExpand, 1000);
}

function fourthBoxController() {

    if (first.classList.contains("expand")) {
        first.className = "";
        first.className = "firstCenter";
        firstSub.className = "hidden";
        window.setInterval(firstLeft, 1000);
    }

    if (second.classList.contains("expand")) {
        second.className = "";
        second.className = "secondCenter";
        secondSub.className = "hidden";
        window.setInterval(secondLeft, 1000);
    }

    if (third.classList.contains("expand")) {
        third.className = "";
        third.className = "thirdCenter";
        thirdSub.className = "hidden";
        window.setInterval(thirdLeft, 1000);
    }

    if (fourth.classList.contains("fourthBox")) {
        firstLeft();
        secondLeft();
        thirdLeft();
    }

    window.setInterval(fourthExpand, 1000);
}

的CSS： 

.firstBox, .secondBox, 
.thirdBox, .fourthBox {

    width:70%;
    left:12.5%;

}

.firstBox, .secondBox, .thirdBox, 
.fourthBox, .firstSub, .secondSub, 
.thirdSub, .fourthSub, .translateRight, 
.firstLeft, .secondLeft,
.thirdLeft, .expand,
.fourthLeft, .hidden, 
.firstCenter, .secondCenter,
.thirdCenter, .fourthCenter {

border-style: solid;
border-color: black;
position:absolute;
color:white;
text-align:center;
vertical-align:middle;
cursor:pointer;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;

}

.hidden {

visibility:hidden;
opacity:0;

}

.firstBox, .firstLeft, .firstCenter {

top:1.125%;
bottom:75.125%;

}

.secondBox, .secondLeft, .secondCenter {

top:26.25%;
bottom:50.5625%;

}

.thirdBox, .thirdLeft, .thirdCenter {

top:50.5625%;
bottom:26.25%;

}

.fourthBox, .fourthLeft, .fourthCenter {

top:75.125%;
bottom:1.125%;

}

.expand {

width:70%;
top:1.25%;
bottom:1.25%;
left:12.5%;

}

.firstLeft, .secondLeft, 
.thirdLeft, .fourthLeft {

left:.5%; 
width:11.5%;

}

.firstCenter, .secondCenter, 
.thirdCenter, .fourthCenter {

width:50% !important;
left:25% !important;


}

.translateRight {

width:15%;
left:83%;
top:1.25%;
bottom:1.25%;

}

https://jsfiddle.net/sirjackk1888/suz5tuvk/#&togetherjs=lfb64hCRVu

1 个答案:

答案 0 :(得分：0)

您可以通过将setInterval方法更改为setTimeout来获得所需的功能，如本演示中所示 - Fiddle。这将只执行一次您的函数，而不是每秒重复调用它们。

但是你肯定可以改进你的代码。

<强>更新

我认为您可以将代码缩短为如下所示。查看演示 - Fiddle 

function moveLeft() {
    this.el.className = "left";
}

function expand() {
    this.el.className = "expand";
    this.elSub.className = "translateRight";
}

var obj = {
    "first": {
        "el": document.getElementById("first"),
        "elSub": document.getElementById("firstSub")
    }
    , "second": {
        "el": document.getElementById("second"),
        "elSub": document.getElementById("secondSub")
    }
    , "third": {
        "el": document.getElementById("third"),
        "elSub": document.getElementById("thirdSub")
    }
    , "fourth": {
        "el": document.getElementById("fourth"),
        "elSub": document.getElementById("fourthSub")
    }
}


//movement functions
function boxController(el) {

    for (var key in obj) {
        if (el.id != key) {
            if (obj[key].el.className === "expand") {
                obj[key].el.className = "center";
                window.setTimeout(
                    function(o) { return function() { moveLeft.call(o) }; }(obj[key]),
                  1000
               );  
                obj[key].elSub.className = "hidden";
            } else {
                moveLeft.call(obj[key]);
            }
        }
    }

    window.setTimeout( function(o) { expand.call(obj[el.id]) }, 1000);     

}

标记

<section id="content">

    <div id="first" class="box" onclick="boxController(this)">1 2000-2005</div>
    <div id="second" class="box" onclick="boxController(this)">2 2005-2010</div>
    <div id="third" class="box" onclick="boxController(this)">3 2010-2015</div>
    <div id="fourth" class="box" onclick="boxController(this)">4 2015-2020</div>

    <div id="firstSub" class="hidden">1</div>
    <div id="secondSub" class="hidden">2</div>
    <div id="thirdSub" class="hidden">3</div>
    <div id="fourthSub" class="hidden">4</div>

</section>
相关问题
最新问题