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

变化：


        tmp.onclick = function(name, key)
        {
            return function()
            { 
                return insertProject(name, key);
            };
        } (infos.projects[i].name, infos.projects[i].key);

到


        tmp.onclick = function(j){
          return function(name, key)
          {
            return function()
            { 
                return insertProject(name, key);
            };
          } (infos.projects[j].name, infos.projects[j].key);
        }(i)

Answer 2

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

另请注意我是如何更改代码以创建元素对象并分配其属性，而不是构建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;
    }
}

使用参数在JavaScript中添加onclick事件

2 个答案: