Question

I have something like this on a page:

<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>

and the script that handles a swipeleft event is:

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

At this point you should be stuck on Page1 because there is no actual transition happening but if you try doing a swipeleft gesture the log shows this:

#page4|#undefined

Whereas the expected output should be:

#page1|#page2

What am I doing wrong?

Answer 1

Your variable (i) is defined in the wrong scope. You can try passing the loop index to a Self-invoking function that closes with that value:

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