Question

我在包装器标签中创建了许多子元素：

// display prompts in html 
    function show_prompts(found_elements){
            var div = document.getElementById("prompts");

            // iterate through list of found words
            for (var i=0; i < found_elements.length; i++){

            // initialize child element
            var p = document.createElement('p');

            // creating specific ID for each child 
            identificator = 'variant'+[i];
            p.id = identificator;

            // filling child with text
            p.innerHTML = found_elements[i];

            p.addEventListener("click", function(){choose_prompt(identificator);});
            //p.setAttribute("onclick", "choose_prompt()");
            div.appendChild(p);
            }
    }

目标： 在浏览器中单击其中一个子元素后，函数 choose_prompt 将激活并使用单击元素的innerHTML进行一些工作。

问题： 单击时， choose_prompt 确定所有元素的最后一次迭代ID。我知道它是因为在循环中调用了 addEventListener 。

问题： 如何在单击精确子元素时将正确的ID传递给 choose_prompt ？

我期望在没有任何jquery的情况下应对任务。我和JS的第二天，所以不要严格。

非常感谢任何帮助。谢谢！

Answer 1

JS没有块范围，因此所有identificator绑定实际上是最后更新的值。

用函数调用包装它以创建一个独立的闭包：

for (var i=0; i < found_elements.length; i++) {
  (function(i) {
     // do your job here with i
  })(i)
}

或者使用forEach方法，每次迭代都有自己的范围：

found_elements.forEach(function(element, i) {
  // do your job here with i
});

注意：对于第二种方法，如果dom api（found_elements，querySelectorAll或其他类似方法）返回getElementsByTagName，则它不是真正的数组。然后你应该调用它的数组方法：

Array.prototype.forEach.call(found_elements, function(element, i) {
  // do your job here with i
});

Javascript - 获取子元素innerHTML onclick

1 个答案: