jQuery Mobile:函数返回错误的 DIV ID

jQuery Mobile: Function returns wrong DIV id

本文关键字：DIV ID 错误 返回 Mobile 函数 jQuery      更新时间：2023-09-26

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

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

此时，您应该停留在第 1 页，因为没有发生实际的过渡，但如果您尝试向左滑动手势，日志将显示以下内容：

#page4|#undefined

而预期输出应为：

#page1|#page2

我做错了什么？

您的变量 （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);
    }
}
相关文章：