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，单击下一个按钮将导致3用于计算，剩余边距的值将与前一个值相同。因此，在您看到屏幕移动到下一张幻灯片之前需要您点击2次。

Answer 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');
        }
    });
});

Answer 3

我认为你的逻辑存在问题。

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

我将运动抽象为一个功能。我将.signupSection上的检查替换为硬编码值进行测试。

可以在加载时单击按钮＃1，然后需要单击按钮＃2两次。然后还需要单击按钮＃1两次

3 个答案: