0

次の jQuery は for ループ内にあります。

$(document).one('keydown',function(e) {
    if( e.which === 90 && leftPosition + 50 <= maxHeight) {
        var newLeftPosition = (leftPosition + 1) + 'px';
        $("#leftPaddle").css({top:newLeftPosition});         
    }
});

z キーが押された場合、反復ごとに 1 回起動する必要があります。最初に発火しますが、ループの終了後にループを再開しない限り、再度発火することはありません。私はもともと次のものを持っていましたが、それも一度しか発火しませんでした:

$(document).keydown(function(e){
  if(e.which === 90 && leftPosition + 50 <= maxHeight) {
        var newLeftPosition = (leftPosition + 1) + 'px';
        $("#leftPaddle").css({top:newLeftPosition});         
    }   
});

2 番目のスニペットの欠点は、これも 1 回しか起動されないことに加えて、キーが押されなくなるまでループが停止することです。

変数 leftPosition は for ループ内で設定され、各反復を更新する必要があります。次のように宣言および初期化されます。

var leftPosition = $("#leftPaddle").position().top;

#leftPaddle の CSS は次のとおりです。

#leftPaddle {
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:48px;
  background-color:#BADA55;
  border:1px solid #000;
}

フィドル、実際の動作を確認します。

-ボーナスクールポイント。無限ループを作成すると、jsFiddle がロードに失敗し、ブラウザーがフリーズします。それはフィドルの問題ですか？

4

1 に答える 1