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> 

以及一個處理一個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); 
     }); 
    } 
} 

此時，你應該是由於沒有實際的轉換髮生，因此沒有實際的轉換髮生，但如果您嘗試做一個滑動手勢，日誌會顯示：

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