Question

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

第一页= var距离= 0

第一页= var距离= -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;

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

2 个答案: