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