ajax函数用addEventListener循环

所以我要做的只是一个简单的网页只有2个链接，当你点击一个按钮时，它会加载（在同一页面中）一个具体的.html文件的内容。

例如：链接1（标识为“L1”）显示L_1.html的内容，同时链接2（标识为“L2”）显示L2.html的内容。

我的代码中的问题是，不管我按哪个按钮，它总是加载第二个.html文件。我把我所有的代码在这里：

的index.html - >

<body> 
<div id="losEnlaces"> 
<a href="#" id="e1">Link 1</a> 
<a href="#" id="e2">Link 2</a> 
</div> 

<div id="show"> 
    Here will be the future content 
</div>

另2个.html文件只能有一个<h1>page number X</h1>每一个。（他们的名字是E2_1.html和E2_2.html）

.js文件 - >

window.onload=function(){ 
    var enlaces=document.getElementsByTagName("a"); 
    var pag; 
    var laID; 
    for (var i = 1; i <= enlaces.length; i++) { 
     pag="E2_"+i+".html"; 
     laID="e"+i; 
     document.getElementById((laID)).addEventListener("click",function(){ 
      mostrarHTML(pag,'show'); 
     },false); 
    }; 
} 

function mostrarHTML(data, idDiv){ 
    var XMLHttpRequestObject = false; 
    if (window.XMLHttpRequest) { 
     XMLHttpRequestObject = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    if(XMLHttpRequestObject) { 
     var objeto = document.getElementById(idDiv); 
     XMLHttpRequestObject.open("GET", data); 
     XMLHttpRequestObject.onreadystatechange = function(){ 
      if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { 
       objeto.innerHTML = XMLHttpRequestObject.responseText; 
     } 
    } 
    XMLHttpRequestObject.send(null); 
} 
}

来源

2014-01-13 Doruko

你的问题是范围和闭包在js中的工作方式，因此pag将始终保持不变。检查这个问题和答案：[JavaScript的循环索引奇怪]（http://stackoverflow.com/q/2803351/1960455） –

谢谢，我会看看。 – Doruko

我终于改变的addEventListener这解决了这个问题：

document.getElementById(laID).addEventListener("click",(function(pag){ 
      return function(){ 
       mostrarHTML(pag,'mostrador'); 
      } 
     })(pag),false);

来源

2014-01-13 08:39:48 Doruko

ajax函数用addEventListener循环

回答

相关问题