Javascript if和elseif语句都触发

我正在构建一个远离鼠标并“环绕”窗口的按钮。对于jQuery/JavaScript来说，这是一个相对较新的学习练习（我的灵感来自于本页的第4页：）

背景：这实际上是我的第二次尝试，可能不是解决这个问题的最优雅的方法。基本上，在第二个版本中，有隐藏的“临时”按钮，它们与按钮一起移动，并在按钮开始离开屏幕时出现。（我的第一次尝试只有两个按钮，但遇到了问题。）

下面是一个嵌套的if/else语句，用于检测按钮的一部分何时移出窗口，如果移出，则在正确位置显示临时按钮，以提供“环绕”效果。它还检查整个按钮是否已移出屏幕，如果是，则将按钮移至新坐标（临时按钮已暴露的位置）

我认为整个if/else语句应该只允许按钮缠绕到一侧，即使按钮留在拐角处。然而，当离开一个角落时，它有时会缠绕到2或3个角落。为什么会这样

我用完整的代码创建了一个JSFIDLE：

非常感谢所有的帮助/建议

// Is any part of the button about to move off the page?

// To the top?
if (edgeTop < 0) {

    // Always wrap to the bottom
    bottom.show();

    // Is the button disappearing?
    if (edgeBottom < 0) {
        // Move the button
        buttonNextY += parseInt(viewportHeight);
        moveAll();
        // Hide everything else
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the right?
else if (edgeRight > parseInt(viewportWidth)) {

    // Wrap to the left
    left.show();

    // Is the button disappearing?
    if (edgeLeft > parseInt(viewportWidth)) {
        buttonNextX -= parseInt(viewportWidth);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the bottom?
else if (edgeBottom > parseInt(viewportHeight)) {

    // Wrap to the top
    top.show();

    // Is the button disappearing?
    if (edgeTop > parseInt(viewportHeight)) {
        buttonNextY -= parseInt(viewportHeight);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the left?
else if (edgeLeft < 0) {

    // Wrap to the right
    right.show();

    // Is the button disappearing?
    if (edgeRight < 0) {
        buttonNextX += parseInt(viewportWidth);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// If the button is completely inside the window
else {
    moveAll();
}

//按钮的任何部分是否即将移出页面？
//到顶端？
如果（边缘点<0）{
//总是裹到底
show（）；
//按钮不见了吗？
如果（edgeBottom<0）{
//移动按钮
buttonNextY+=parseInt（视口高度）；
moveAll（）；
//隐藏其他一切
hideTemps（）；
}
否则{
moveAll（）；
}
}
//右边？
else if（edgeRight>parseInt（视口宽度））{
//向左绕
左。show（）；
//按钮不见了吗？
如果（edgeLeft>parseInt（视口宽度））{
buttonNextX-=parseInt（视口宽度）；
moveAll（）；
hideTemps（）；
}
否则{
moveAll（）；
}
}
//到底？
else if（edgeBottom>parseInt（视口高度））{
//包到顶部
top.show（）；
//按钮不见了吗？
如果（edgeTop>parseInt（视口高度））{
buttonNextY-=parseInt（视口高度）；
moveAll（）；
hideTemps（）；
}
否则{
moveAll（）；
}
}
//左边？
否则如果（edgeLeft<0）{
//右转
对。show（）；
//按钮不见了吗？
如果（边缘光<0）{
buttonNextX+=parseInt（视口宽度）；
moveAll（）；
hideTemps（）；
}
否则{
moveAll（）；
}
}
//如果按钮完全在窗口内
否则{
moveAll（）；
}

我认为他们的要求不清楚“屏幕的另一面”。。。。我会说你的剧本写得很好。他们并没有真正考虑奖金要求，只是增加了奖金，看看哪个候选人会付出更多的努力。。。。无论如何，让你们的按钮之间有更多的距离，至少增加x轴上的按钮宽度和y轴上的按钮高度。。。不要隐藏任何副本。相信我，它会自然地包起来；）

有时会颠倒moveAll和hideTemps的顺序。这是故意的吗？@SteveWellens不，抓得好。我使它们保持一致，但仍然看到不止一个wrap。我认为问题在于在if/else语句中调用hideTemp（）的地方。将其从当前位置移除，并将其放在每个if/else语句之后。有时执行2个else语句的原因是因为hideTemp包含在第二个if/else中，而不是每次调用清除按钮（不确定！），我认为它们的要求不清楚“屏幕的另一侧”。。。。我会说你的剧本写得很好。他们并没有真正考虑奖金要求，只是增加了奖金，看看哪个候选人会付出更多的努力。。。。无论如何，让你们的按钮之间有更多的距离，至少增加x轴上的按钮宽度和y轴上的按钮高度。。。不要隐藏任何副本。相信我，它会自然地包起来；）@米兰加里克你说得对-谢谢！