javascript - 每次单击按钮时使 div 向一个方向移动

Question

我正在尝试为一个在点击时显示缩略图的图库编写代码:

我制作了一个名为“track”的 div，里面是缩略图。

现在使用我当前的代码，当我按下按钮时它会向左移动 -100px 当我再次点击时没有任何反应。我希望这是连续的。 10为 margin 位置

$("#button").click(function () {
    var a = 10;
    var b = 10;
    var c = function () {
        if (a >= b) {
            a = b - 100;
            return (a);
        }
    };
    $('#track').css({
        'margin': '10px ' + c() + 'px',
        'transition-duration': '1s'
    });
});

所以，在代码 c 返回 -90px 之后 和 idk 如果他在 css 中保存到 margin 的新值:10px 10px; margin ； 10px -90px;

如果有人知道如何在每次点击移动 -100 像素后做到这一点？

Fiddle

Answer 1

变量 a 和 b 将设置为值 10。 由于 b 永远不会在您的代码中的任何地方再次重置，您的函数将始终返回 b - 100，实际上是 10 - 100。所以它只会在这个位置移动一次。

    var a = 10;
    var b = 10;
    var c = function () {
        if (a >= b) {
            a = b - 100;
            return (a);
        }

如果我理解正确的话，您想要的是每次按下按钮时更改值。在下面的代码中，我在点击定义之外得到了 var a = 10;。我删除了 var b 并在每次点击时递减你的 a。您可能应该添加一个条件以在某个时间点停止此效果。

var a = 10;
$("#apDivvv2").click(function() {   
var c = function () {
    a-=100;
    return a;
};

$('#track').css({'margin':'10px ' + c() + 'px', 'transition-duration':'1s'});
});

Here是你更新的 jsfiddle