1

I'm trying to make a dropdown to display the results of a request given what the user writes in a field. The problem I'm encountering is that when I try to add an onclick event to each item in the dropdown, only the last one acts like expected.

The dropdown is a section and I try to include sections in it. Here is the dropdown :

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

Here is the code :

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

The result is visually as I expected, I can see the dropdown with all my projects listed and a pointer while hovering etc... But only the last project is clickable and trigger the "insertProject" function while the other do nothing. If someone could help me solve that !

4

2 回答 2

0

您需要将密钥存储在某处。看看下面的解决方案，我已经使用了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;
    }
}
于 2013-06-05T12:49:00.510 回答
0

改变：


        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)
于 2013-06-05T12:47:10.653 回答