javascript - if 和 elseif 语句都触发

Question

我正在构建一个远离鼠标并“环绕”在窗口周围的按钮。 jQuery/JavaScript 相对较新，我将其构建为一个学习练习(我的灵感来自此页面上的#4:http://panjiva.com/jobs/challenges)。

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

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

我认为整个 if/else 语句应该只允许按钮绕到一侧，即使按钮留在 Angular 落也是如此。但是，它有时会在离开一个 Angular 时绕到 2 个或 3 个 Angular 。为什么会这样？

我用完整的代码创建了一个 JSFiddle:http://jsfiddle.net/aaronmacy/AVwpU/

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

// 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();
}

Answer 1

我认为他们的要求不清楚“屏幕的另一边”......我会说你的脚本工作正常。他们并没有真正考虑奖金要求，他们只是添加它以查看哪个候选人会付出更多努力......无论如何，在你的按钮之间留出更大的距离，至少在 x 轴上添加按钮宽度和在 y 轴上添加按钮高度。 .. 并且不要隐藏任何副本。它会自然地包裹起来，相信我 ;)