JavaScript的 - 如何通過函數從循環傳遞變量

-1

當用戶點擊DIV CLASS =「容器」，它會提醒他spesific孩子（P級=」的innerHTML primary_key」）
沒有JQuery的

的index.html

<html> 
<head> 
    <style> 
     .primary_key{ 
      display: none; 
     } 
    </style> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 

    <div> 
     <div class="container"> 
      <p class="primary_key">1</p> 
      <p class="content">content1</p> 
     </div> 
     <div class="container"> 
      <p class="primary_key">2</p> 
      <p class="content">content2</p> 
     </div> 
    </div> 
</body> 
</html>

周的script.js

window.onload = function(){ 

    var allContainer = document.getElementsByClassName('container'); 
    for(var i=0; i<allContainer.length; i++){ 
     var container = allContainer[i]; 
     allContainer[i].onclick = function(e){ 
      clickContainer(container); 
     } 
    } 
} 

function clickContainer(ele){ 
    var selectedId = ele.getElementsByClassName('primary_key')[0].innerHTML; 
    alert(selectedId); 
}

它應該

當用戶點擊第一容器，它會顯示/警報1
當用戶點擊第二容器，它會顯示/警報2

但我的代碼總是alert = 2

jsfiddle

來源

2014-04-05 ilike

試試這個：

allContainer[i].onclick = function(e){ 
    clickContainer(this); 
}

來源

2014-04-05 06:32:04

工作..沒有關鍵字 '這個' 參考 'allContainer [I]'？ – ilike

@ilike不，它不 – iConnor

出現這種情況的原因是因爲for循環改變container所以點擊的元素時，應提醒2無論哪種方式，因爲container是最後一個容器，可以用一個封閉這樣

for(var i = 0; i < allContainer.length; i++){ 
    (function(container){ 
     container.onclick = function(e){ 
      clickContainer(container); 
     } 
    })(allContainer[i]); 
}

這一個功能

或事件「捕捉」容器更好，你可以刪除所有的東西你for循環，像這樣

for(var i = 0; i < allContainer.length; i++){ 
    clickContainer(allContainer[i]) 
} 

function clickContainer(element){ 
    element.onclick = function() { 
     var selectedId = this.getElementsByClassName('primary_key')[0].innerHTML; 
     alert(selectedId); 
    } 
}

我也建議addEventListener('click', handler)在onclick

來源

2014-04-05 06:30:41 iConnor

嘗試這個 -

var allContainer = document.getElementsByClassName('container'); 
for(var i=0; i<allContainer.length; i++) 
{ 
    var container = allContainer[i]; 
    if (typeof window.addEventListener === 'function'){ 
     (function (e) { 
      container.addEventListener('click', function(){ 
       console.log(e); 
       clickContainer(e); 
      }); 
     })(container); 
    } 
}

其實你需要包裝在封閉的事件偵聽器的分配。

Demo

來源

2014-04-05 06:30:55

JavaScript的 - 如何通過函數從循環傳遞變量

回答

相關問題