Question

这是我试图完成的事情

当用户点击div class ='container'时，它会提醒他的特殊孩子的innerHTML （p class ='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);
}

它应该

当用户点击第一个容器时，它将显示/ alert 1
当用户点击第二个容器时，它将显示/ alert 2

但我的代码总是警告= 2

jsfiddle

Answer 1

发生这种情况的原因是因为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

Answer 2

试试这个 -

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

Answer 3

试试这个：

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

JavaScript - 如何通过循环中的函数传递变量

3 个答案: