javascript - 加载时可以单击按钮 #1，然后需要单击按钮 #2 两次。然后按钮 #1 也需要点击两次

Question

我正在创建的网站上有两个按钮。它们用于移动幻灯片类型的表单。一个将“幻灯片放映”向前移动，另一个将其向后移动。

加载网页后，您可以成功单击“下一步”按钮一次，以将幻灯片放映到所选方向。您可以多次单击“下一步”按钮，直到完成为止。但是，切换到“后退”需要您在执行操作之前单击两次。您现在可以单击“后退”按钮一次以执行该操作。现在点击“下一步”按钮需要点击两次，就像之前的“返回”按钮一样。

HTML:

<div id="signupFormButtonWrapper">
    <button id="signupFormBack" class="button">Back</button>
    <button id="signupFormNext" class="button">Next</button>
</div>

JS:

$(function() {
    var currentScreen = 1;
    $('#signupFormNext').click(function() {
        console.log('Moving screen forwards');
        if (currentScreen < $('.signupSection').length) {
            $('#signupInfo').css('margin-left',currentScreen*(-100/$('.signupSection').length)+'%');
            currentScreen++;
        } else {
            console.log('Can\'t move');
        }
    });
    $('#signupFormBack').click(function() {
        console.log('Moving screen backwards');
        if (currentScreen >= 1) {
            currentScreen--;
            $('#signupInfo').css('margin-left',currentScreen*(-100/$('.signupSection').length)+'%');
        } else {
            console.log('Can\'t move');
        }
    });
});

请原谅 console.log 语句，它们用于调试目的。如果有帮助，单击按钮时，无论是否执行操作，控制台都会记录“向前移动屏幕”或“向后移动屏幕”。如果您需要更多代码，请询问。

提前致谢

Answer 1

嗯，逻辑有问题。每次单击下一步按钮时，都会使用 currentScreen 的旧值来计算左边距。

例如，您在屏幕 4 上移动到屏幕 5，将使用 4 进行计算，然后 currentScreen 将更新为 5。

如果此时点击返回，currentScreen 将从 5 减为 4，再次使用 4 进行计算，这将导致点击下一步按钮时与之前计算的值相同(因此没有变化).因此，要求您在 currentScreen 的值减小到 3 之前单击两次。

此时点击后退按钮2次后，currentScreen为3，点击next按钮会导致3用于计算，剩余边距的值将与之前的值相同。因此，需要您点击 2 次才能看到屏幕移动到下一张幻灯片。