0

ページに次のようなものがあります。

<div id="page1" data-role="page" data-theme="a">Page 1</div>            
<div id="page2" data-role="page" data-theme="a">Page 2</div>            
<div id="page3" data-role="page" data-theme="a">Page 3</div>
<div id="page4" data-role="page" data-theme="a">Page 4</div>

左スワイプイベントを処理するスクリプトは次のとおりです。

var pages = ["page1","page2","page3","page4"];

for( var i=0; i<pages.length; i++  ) {
    var thisPage = '#'+pages[i];

    if( i < pages.length-1) {
        $(thisPage).on('swipeleft', function() {
            var nextPage = '#'+(pages[i+1]);
            console.log(thisPage+'|'+nextPage);
        });
    }
}

この時点では、実際の遷移は発生していないため、Page1 にとどまっているはずですが、左にスワイプ ジェスチャを実行しようとすると、ログに次のように表示されます。

#page4|#undefined

一方、予想される出力は次のようになります。

#page1|#page2

私は何を間違っていますか？

4

1 に答える 1

0

変数 (i) が間違ったスコープで定義されています。その値で終了する自己呼び出し関数にループ インデックスを渡してみることができます。

var pages = ["page1","page2","page3","page4"];

for( var i=0; i<pages.length; i++  ) {
    if( i < pages.length-1) {
        (function(index){
            var thisPage = '#'+(pages[index]);
            $(thisPage).on('swipeleft', function() {
                var nextPage = '#'+(pages[index+1]);
                console.log(thisPage+'|'+nextPage);
            });
        })(i);
    }
}
于 2013-01-22T16:10:37.930 に答える