在JavaScript事件

Question

我想知道是否有人可以帮助我将最大值和最小值，下面的代码的目的是把整个屏幕左侧每次用户点击一个按钮，所以

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

Answer 1

所以加if语句和检查数小于零，当你减少的数量

if (distance<0) distance = 0; 

，当你递增，看它是否是你最大的上方。

if (distance>500) distance = 500; 

Answer 2

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