0

ユーザーが左矢印キーと右矢印キーを押して前/次の画像を取得する Web ページの単純なギャラリーを作成しようとしています。これまでのところ、以下に示すコードがあります。ただし、キーを押しても反応しないようです。コンソールを確認しましたが、エラーはなく、問題が何であるかがわかりません。

.image div html は、キーを押しても変更されません - 何かアイデアはありますか?

$(document).ready(function() {
    var current = 1;
    $("body").keydown(function(e) {
    if(e.keyCode == 37) {
        if (current == 1) {
            var current = 1;
        } else {
            var current = current - 1;
        }
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    else if(e.keyCode == 39) {
        var current = current + 1;
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    });
});

HTML

<body>
    <div class="image">
        <img src="images/1.jpg"/>
    </div>
</body>

私はそれを微調整しました、現在の変数はキーダウンでリセットされていました。OPが編集されました-これにより、現在の変数がファイル名としてNaN.jpgをリストしているという問題が残りますか?

4

2 に答える 2

1

未定義の問題currentは、コードのさまざまなスコープで current を再定義した結果です。これは、可変シャドウイングと呼ばれる厄介なプログラミング バグですhttp://en.wikipedia.org/wiki/Variable_shadowing

変数 current を 1 つのスコープで定義し、次のように下位のスコープで参照する必要があります。

$(document).ready(function() {
    var current = 1;
    $("body").keydown(function(e) {
        alert(current); 
    if(e.keyCode == 37) {
        if (current == 1) {
            current = 1;
        } else {
            current = current - 1;
        }
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    else if(e.keyCode == 39) {
        current = current + 1;
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    });
});

この作業フィドルを参照してくださいhttp://jsfiddle.net/RTWM6/

于 2013-08-12T19:40:30.993 に答える
0

あなたのコードはうまくいっているようです。 http://jsfiddle.net/PZnSd/1/

$("body").keydown(function(e) {
var current = 1;
if(e.keyCode == 37) {
    console.log('left arrow');
    if (current == 1) {
        current = 1;
    } else {
        var current = current - 1;
    }
    $('.image').html('<img src="http://placehold.it/350x150"/>');
}
else if(e.keyCode == 39) {
    console.log('right arrow');
    var current = current + 1;
    $('.image').html('<img src="http://placehold.it/350x250"/>');
}
});
于 2013-08-12T19:30:37.393 に答える