addEventListener的參數似乎無法正常工作

Question

我正在創建一個「幻燈片放映」，如果您將其稱爲頁面導航。

我正在嘗試使用forloop向所有菜單項添加一個eventlistener。它似乎並不奏效。基本上我有一個功能，顯示一個新的頁面，基於一個參數。

function slidePFer(page_side){ 

而且這工作完全通過手動設置事件監聽器是這樣的：

showPF = document.getElementsByClassName('showPF'); 

showPF[0].addEventListener('click', function(){ slidePFer(0); }, false); 
showPF[1].addEventListener('click', function(){ slidePFer(1); }, false); 
showPF[2].addEventListener('click', function(){ slidePFer(2); }, false); 
showPF[3].addEventListener('click', function(){ slidePFer(3); }, false); 

然而，這看起來非常凌亂。所以我試圖通過不同的循環來運行。我只是不能讓它工作，這裏是更promissing環路我曾嘗試之一：

for(var i=0, n=showPF.length; i<n; i++){ 
    showPF[i].addEventListener('click', function(){ slidePFer(i); }, false); 
} 

任何人可以看到我似乎不明白？從功能（I）

Answer 1

消除I也許這將修復它

Answer 2

使用jQuery（http://jquery.com），可以簡化這個是這樣的：

HTML

<img slideNo="0" class="showPF" src="slide_0_preview.jpg" /> 
<img slideNo="1" class="showPF" src="slide_1_preview.jpg" /> 
<img slideNo="2" class="showPF" src="slide_2_preview.jpg" /> 

的JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.showPF').click(function() { 
      slidePFer($(this).attr('slideNo')); 
     }); 
    }); 
    function slidePFer(slideNo) { 
     // todo 
    } 
</script> 

Answer 3

我終於找到了解決方案我自己對任何有興趣的人這就是我所做的它：

showPF   = document.getElementsByClassName('showPF'); 

var i = showPF.length; 
    while(i--){ 
     showPF[i].addEventListener('click', function(x){ return function(){ slidePFer(x); }; }(i),false); 
    } 

信貸，信貸的作用： http://brackets.clementng.me/post/24150213014/example-of-a-javascript-closure-settimeout-inside-a