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

Question

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

这是我试图完成的

当用户点击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>

Run Code Online (Sandbox Code Playgroud)

的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);
}

Run Code Online (Sandbox Code Playgroud)

它应该

当用户点击第一个容器时,它将显示/警告1
当用户点击第二个容器时,它将显示/警告2

但我的代码总是警告= 2

的jsfiddle

Answer 1

iCo*_*nor 7

发生这种情况的原因是因为for循环正在改变container所以当单击元素时它应该警告2,因为container是最后一个容器,你可以使用这样的闭包

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

Run Code Online (Sandbox Code Playgroud)

这"捕获"函数中的容器

或者事件更好,你可以删除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);
    }
}

Run Code Online (Sandbox Code Playgroud)

我也建议addEventListener('click', handler)过onclick

归档时间：	12 年，1 月前
查看次数：	107 次
最近记录：	12 年，1 月前