Javascript 导致 div 卡住交替两个类

Question

我有一个功能，可以通过使用 JS 设置类名来移动框。问题是不知何故，在正确的时间设置了正确的类，但是 div 在原始类和新类之间交替......每秒。我将尝试在此处发布 fiddle 链接。页面上有四个框，点击一个成功将其他三个翻译到左边，然后展开选中。这部分工作正常。问题是当我单击一个展开了四个中的一个的左框时。扩展的开始过渡到新类，但随后开始回到扩展的位置......然后永远来回。我试过从 div 中清除所有类，然后进行翻译。我相信我缺少 JS 的设计规则？我尝试过的任何事情都无法改变类(Class)斗争。

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

Answer 1

您可以通过将 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>