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>

和处理swipeleft事件的脚本是：

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

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

1 个答案: