Question

我正在从xml文件中检索一些信息（电影信息），我正在根据每部电影动态创建一些DOM元素。我想，当我点击测试元素时，获取电影标题的值。现在，无论我点击哪部电影，它都会获得最后一部电影的标题。

当我点击该div而不是for-loop引入的最后一个时，如何获得每部电影的标题？

    xmlDoc=xmlhttp.responseXML; 
        var x=xmlDoc.getElementsByTagName("movie");
        for (i=0;i<x.length;i++)
        {
            var titlu =  x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            var description = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;

            var descriere = document.createElement('div');
            descriere.className='expandedDescriere';
            descriere.innerHTML = description;

            var titlediv = document.createElement('div');       
            titlediv.className = 'title';       
            titlediv.id='title';        
            titlediv.innerHTML = title;

            var test=document.createElement('div');
            test.className='test';
            test.onclick= function(){
                          var filmName= test.previousSibling.innerHTML;
                          alert(filmName);
                          }
            placeholder.appendChild(titlediv);
            placeholder.appendChild(test);
            placeholder.appendChild(descriere);
       }

Answer 1

我认为您的问题可能出在您分配给onclick的功能中：

test.onclick= function(){
                      var filmName= test.previousSibling.innerHTML; // <===
                      alert(filmName);
              }

标记的行应为var filmName= this.previousSibling.innerHTML;

我的猜测是var test是for循环中的hoisted，这意味着当循环结束时，所有onclick函数都引用相同的test {{1}} 1}}变量，它是您创建的最后一个元素。

Answer 2

使用this引用点击的元素：

test.onclick = function() {
                 var filmName = this.previousSibling.innerHTML;
                 alert(filmName);
               };

Javascript：获取动态创建的div的innerHTML

2 个答案: