这是我试图完成的事情
的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);
}
它应该
但我的代码总是警告= 2
答案 0 :(得分:7)
发生这种情况的原因是因为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
答案 1 :(得分:0)
试试这个 -
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);
}
}
实际上,您需要将事件侦听器的赋值包装在闭包中。
答案 2 :(得分:0)
试试这个:
allContainer[i].onclick = function(e){
clickContainer(this);
}