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

【问题标题】：Parameter for addEventListener doesn't seem to work properlyaddEventListener 的参数似乎无法正常工作
【发布时间】：2013-10-17 09:57:37
【问题描述】：

我正在创建一个“幻灯片”，如果你愿意的话，它会用于页面导航。

我正在尝试使用 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);
}

谁能看到我似乎不明白的地方？

【问题讨论】：

还在寻找正确答案，如果有人知道吗？

标签： javascript for-loop while-loop addeventlistener

【解决方案1】：

从函数（i）中删除 i 也许这会解决它

【讨论】：

试过了。我添加了“i”以查看这是否是我的错误，但提示不是 thx :)
还有什么是色板的价值？也许它必须是 showPF .length
不，它不是样本的价值。它是一个数组。我以前做过，但没有使用 addeventlisteners。
您应该在 for 循环上方添加这一行 alert(swatches.length); 行以检查您的数组是否有长度。
我知道 .length 有效。因为我很久以前就做过那个警报:) 和你现在的想法一样。但这也不是问题

【解决方案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>

【讨论】：

应该说我在没有 jQuery 的情况下这样做。谢谢你的回复

【解决方案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

【讨论】：