誰もが私を助けることができれば、私は思っていたJavaScriptイベント

Question

での最小値と最大値を追加して、以下のコードの目的は、画面全体を翻訳することで、ユーザーがボタンをクリックするたびに左に、そう

ページ1 = VAR距離= 0

ページ1 = VARの距離= -100

ページ1 = VARの距離= -200

などが、私このように最小= 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

上の境界のを置くためにそこにいくつかの方法が存在する場合ステートメントを追加さ​​れ、ユーザーは100％の幅を持っているページの量の道を行くしたくないとあなたは数に

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

---

それとも、あなたは距離変数の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); 
});