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

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

第一页=变量距离=0

第一页=变量距离=-100

第一页=变量距离=-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);
    });

---

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

if (distance<0) distance = 0;

和就可以了

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

---

可以设置距离变量的IF条件

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