加载时可以单击按钮#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

本文关键字：按钮 两次 单击 然后 加载      更新时间：2023-09-26

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

加载网页后，您可以成功单击"下一步"按钮一次，将幻灯片按选定方向移动。您可以任意多次单击"下一步"按钮，直到到达终点。但是，切换到"上一步"需要在执行操作之前单击两次。您现在可以单击"后退"按钮一次来执行操作。单击"下一步"按钮现在需要单击两次，就像以前单击"上一步"一样。

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

提前感谢

嗯，逻辑有问题。每次单击下一个按钮时，currentScreen的旧值将用于计算左边距。

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

如果您在这一点上单击返回，currentScreen将从5减少到4，4将再次用于计算，这将导致与单击下一个按钮时先前计算的值相同（因此没有变化）。因此，在currentScreen的值减为3之前，需要单击两次。

右键单击后退按钮2次后，currentScreen为3，单击下一个按钮将导致3用于计算，并且左边距的值将与上一个值相同。因此，在看到屏幕移动到下一张幻灯片之前，需要单击两次。

您似乎在移动后增加当前屏幕，但在移动屏幕之前减少当前屏幕。因此，让我们通过逻辑（状态跟踪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');
        }
    });
});

我认为您的逻辑有问题。

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

我把动作抽象成一个函数。我将.signupSection上的检查替换为用于测试的硬编码值。

相关文章：