addEventListener的参数似乎无法正常工作

Question

我将创建一个“幻灯片放映”（如果您将其称为“幻灯片放映”），以进行页面导航。

我正在尝试使用forloop将事件监听器添加到所有菜单项。 而且它似乎不起作用。 基本上我有一个基于参数显示新页面的函数。

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

但是，这看起来很混乱。 所以我试图用不同的循环来运行它。 而且我只是无法使其工作，这是我尝试过的更令人发指的循环之一：

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

有人可以看到我似乎不明白的内容吗？

Answer 1

从函数（i）中删除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