我正在创建一个“幻灯片”,如果您将其称为页面导航。
我正在尝试使用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);
这看起来非常凌乱。所以我尝试使用不同的循环来运行它。我只是无法使它工作,这是我尝试过的更有希望的循环之一:
for(var i=0, n=showPF.length; i<n; i++){
showPF[i].addEventListener('click', function(){ slidePFer(i); }, false);
}
有人能看到我似乎不理解的东西吗?
答案 0 :(得分:1)
从功能中删除i(i)也许这会解决它
答案 1 :(得分:0)
使用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>
答案 2 :(得分:0)
我终于找到了解决方案,对于任何感兴趣的人我都是这样做的:
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