javascript - jQuery Mobile：函数返回错误的 DIV id

Question

我在页面上有这样的东西：

<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

我究竟做错了什么？

Answer 1

您的变量 (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);
    }
}