javascript - 在 JavaScript 中添加带有参数的 onclick 事件

Question

我正在尝试创建一个下拉列表来根据用户在字段中写入的内容来显示请求的结果。我遇到的问题是，当我尝试向下拉列表中的每个项目添加 onclick 事件时，只有最后一个项目的行为符合预期。

下拉菜单是一个部分，我尝试在其中包含部分。这是下拉菜单:

<section id="projectDrop">
</section>

这是代码:

var j = 0;
var tmp;
for (var i=0;((i<infos.projects.length) && (i<5));i++)
{
    if (infos.projects[i].name.toLowerCase().match(projectName.value.toLowerCase()))
    {
        projectDrop.innerHTML += '<section id="project' + j + '">' + infos.projects[i].name + '</section>';
        tmp = document.getElementById('project' + j);
        projectDrop.style.height = (j+1)*20 + 'px';
        tmp.style.top = j*20 + 'px';
        tmp.style.height = '20 px'; 
        tmp.style.width = '100%';
        tmp.style.color = 'rgb(0, 0, 145)';
        tmp.style.textAlign = 'center';
        tmp.style.cursor = 'pointer';
        tmp.style.zIndex = 5;
        tmp.onclick = function(name, key)
        {
            return function()
            { 
                return insertProject(name, key);
            };
        } (infos.projects[i].name, infos.projects[i].key);
    ++j;
    }
}

结果在视觉上正如我预期的那样，我可以看到列出的所有项目的下拉列表以及悬停时的指针等...但只有最后一个项目是可点击的并触发“insertProject”函数，而其他项目则不执行任何操作。如果有人能帮我解决这个问题!

Answer 1

您需要将 key 存储在某处。看看下面的解决方案，我用过data-key <section> 上的属性存储 key 。

另请注意我如何更改代码来创建元素对象并分配其属性，而不是构建 HTML 的原始字符串。将 HTML 构建为字符串的问题是您必须担心转义引号，而这种方式则不必担心。

var j = 0;
var tmp;
for (var i=0;((i<infos.projects.length) && (i<5));i++)
{
    if (infos.projects[i].name.toLowerCase().match(projectName.value.toLowerCase()))
    {
        tmp = document.createElement('section');
        tmp.id = "project" + j;
        tmp.setAttribute('data-key', infos.projects[i].key);
        tmp.innerHTML = infos.projects[i].name;

        projectDrop.style.height = (j+1)*20 + 'px';
        tmp.style.top = j*20 + 'px';
        tmp.style.height = '20 px'; 
        tmp.style.width = '100%';
        tmp.style.color = 'rgb(0, 0, 145)';
        tmp.style.textAlign = 'center';
        tmp.style.cursor = 'pointer';
        tmp.style.zIndex = 5;
        tmp.onclick = function(){
            insertProject(this.innerHTML, this.getAttribute('data-key'));
        };

        projectDrop.appendChild(tmp);

        ++j;
    }
}