Fiddle

Question

我正在尝试为点击时显示缩略图的图库创建代码：

我创建一个名为“track”的div，里面是缩略图。

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

$("#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之后并且如果他将css保存到保证金的新值，则为idk：10px 10px;保证金; 10px -90px;

如果有人知道如何在每次clik移动-100px之后制作它？

Fiddle

Answer 1

您的代码只能使用一次：

第一次运行a = b。移动-100px后，a = -90px和b = 10，a<b。这就是为什么再次点击它不起作用的原因，因为它不满足if中的条件。

您需要将您的操作放在click函数中，而不是在外部进行渲染。

Answer 2

Vars 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

每次单击按钮时，都会向一个方向移动div

Fiddle

2 个答案: