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循環

回答

相關問題