Question

我尝试使用以下代码在onclick属性中使用带有一个参数的函数在Javascript中动态创建菜单：

function createCameraMenu() {
    var nav = document.createElement('nav');
    var ul  = document.createElement('ul');
    ul.className = "menu";

    for (var i = 0; i < cameraID.length; i = i + 1) {
        var liField = document.createElement('li');
        var aField  = document.createElement('a');

        aField.textContent = "CAMERA " + i;

        aField.onclick = function() {
            hideImages(i);
        };

        li.appendChild(aField);
        ul.appendChild(li);
    }

    nav.appendChild(ul);
    document.body.appendChild(nav);
}

，结果应该是下面的代码：

<nav>
    <ul class="menu" >
        <li><a href="#" onClick="hideImages(0)">CAMERA 1</a></li>
        <li><a href="#" onClick="hideImages(1)">CAMERA 2</a></li>
        <li><a href="#" onClick="hideImages(2)">CAMERA 3</a></li>                
    </ul>
</nav>

但在创建菜单后，对于任何单击的项目，将执行函数hideImages（3）。出于某种原因，我的所有函数都使用相同的参数（3）创建，即＆＃34; i＆＃34;在for循环中被拒绝。我的代码中没有全局变量，我也不知道为什么会这样。此函数在HTML文件头部的脚本标记中执行。

Answer 1

您需要使用closure，例如：

for (var i = 0; i < cameraID.length; i = i++) {
        var liField = document.createElement('li');
        var aField  = document.createElement('a');

        aField.textContent = "CAMERA " + i;

        aField.onclick = (function(i){ return function() {
            hideImages(i);
        };})(i);

        li.appendChild(aField);
        ul.appendChild(li);
    }

现在为了便于阅读，您可以使用引用的方法：

aField.onclick = hideImages.bind(aField, i);

javascript参数错误编号

1 个答案: