在 JavaScript 事件中添加最小值和最大值

Question

我想知道是否有人可以帮助我，下面代码的目的是在用户每次单击按钮时翻译整个屏幕，所以

第一页 = 变量距离 = 0

第一页 = 变量距离 = -100

第一页 = VaR 距离 = -200

等等，但我不希望用户使用宽度为 100% 的页面数量，有没有办法将边界放在上面，所以最小值 = 0 和最大值 = 500

var distance = 0;
    $('.right').click(function() {
        distance -= 100;
        $('#container').css('transform', 'translateX(' + distance + '%)')
        console.log(distance);
    });
    $('.left').click(function() {
        distance += 100;
        $('#container').css('transform', 'translateX(' + distance + '%);')
        console.log(distance);
    });

Answer 1

Math.min()和Math.max()就可以了

var distance = 0;
$('.right').click(function() {
    distance = Math.max(0, distance- 100);
    $('#container').css('transform', 'translateX(' + distance + '%)')
    console.log(distance);
});
$('.left').click(function() {
    distance = Math.min(500, distance+ 100);
    $('#container').css('transform', 'translateX(' + distance + '%);')
    console.log(distance);
});

---

或者你可以使用三元运算符

var distance = 0;
$('.right').click(function() {
    distance -=  (distance==0 ? 0 : 100);
    $('#container').css('transform', 'translateX(' + distance + '%)')
    console.log(distance);
});
$('.left').click(function() {
    distance += (distance==500 ? 0 : 100);
    $('#container').css('transform', 'translateX(' + distance + '%);')
    console.log(distance);
});

Answer 2

因此，添加if语句并在减少数字时检查数字是否小于零

if (distance<0) distance = 0;

当您递增时，查看它是否高于您的最大值。

if (distance>500) distance = 500;