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

【问题标题】：Button #1 can be clicked on load, then Button #2 needs to be clicked twice. Button #1 then also needs to be clicked twice按钮 #1 可以在加载时单击，然后按钮 #2 需要单击两次。按钮 #1 然后也需要点击两次
【发布时间】：2016-04-16 21:07:18
【问题描述】：

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

加载网页后，您可以成功单击“下一步”按钮一次，将幻灯片沿所选方向移动。您可以根据需要多次单击“下一步”按钮，直到结束。但是，切换到“返回”需要您单击两次才能执行操作。您现在可以单击“返回”按钮一次以执行该操作。现在单击“下一步”按钮需要单击两次，就像之前的“返回”按钮一样。

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

提前致谢

【问题讨论】：

你能发布更多的html吗？正如您提到的其自身作品的点击逻辑（记录移动屏幕的内容），但必须有其他事情发生

标签： javascript jquery html button onclick

【解决方案1】：

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

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

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

现在点击返回按钮2次后，currentScreen为3，点击next按钮将导致3用于计算，并且margin left的值将与之前的值相同。因此，需要您单击 2 次才能看到屏幕移动到下一张幻灯片。

【讨论】：

【解决方案2】：

您似乎在移动后增加当前屏幕，但在移动屏幕之前减少当前屏幕。所以让我们来处理一下逻辑（状态跟踪 currentScreen 变量（开始时为 1）和幻灯片图像（开始时为 0））

STATE: currentScreen = 1, slide-image = 0
ACTION: Next button pressed
WHAT HAPPENS:
    slide-image -> 1
    currentScreen -> 2

STATE: currentScreen = 2, slide-image = 1
ACTION: Next button pressed
WHAT HAPPENS:
    slide-image -> 2
    currentScreen -> 3

所以效果很好，现在当我们按下返回时会发生什么

STATE: currentScreen = 3, slide-image = 2
ACTION: Prev button pressed
WHAT HAPPENS:
    currentScreen -> 2
    slide-image -> 2

STATE: currentScreen = 2, slide-image = 2
ACTION: Prev button pressed
WHAT HAPPENS:
    currentScreen -> 1
    slide-image -> 1

在这里你可以看到，因为你在设置之前递减，所以有一个滞后。当您切换方向时，同样的事情再次发生。要解决此问题，请从 0 开始计数器，然后在每次设置图像之前递减/递增。例如：

$(function() {
     var currentScreen = 0; // start at 0
     $('#signupFormNext').click(function() {
         console.log('Moving screen forwards');
         if (currentScreen < $('.signupSection').length) {
             currentScreen++; // increment before you set css
             $('#signupInfo').css('margin-left',currentScreen*(-100/$('.signupSection').length)+'%');
        } 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');
        }
    });
});

【讨论】：

尽管有人在你之前得到了答案，但你已经提供了合适的编辑和很好的解释。谢谢。

【解决方案3】：

我认为你的逻辑有问题。

请参阅以下 jsfiddle：https://jsfiddle.net/q8pby5cL/1/

我将运动抽象为一个函数。我用硬编码值替换了.signupSection 上的检查以进行测试。

【讨论】：