我有一个 for 循环来创建div
- ID 为“category1”、“category2”等的元素。循环遍历一个键/值数组,如下所示:
"0" : "Java",
"1" : "JavaScript",
"2" : "HTML"
因此,div 的 ID 是“category”+ key。
在 for 循环中,元素被添加到innerHTML
的container-div,我添加一个onclick
-event.
这就是我正在讨论的 for 循环:
for (var key in categories) {
categoriesBlock.innerHTML += '<div class="category" id="category' + key + '">' + categories[key] + '</div>';
document.getElementById('category' + key).onclick = function() { showPostsForCategory(key, categories[key]); }
}
where categories
就是上面的数组。
问题是,onclick
仅适用于数组中的最后一个元素。如果我检查 Safari 调试器并输入“category3.onclick”,它会显示 null。如果我输入“category4.onclick”(这是最后一个),它会返回正确的函数。
这怎么可能?以及如何解决呢?
这是范围界定的问题。单击处理程序指向最后一个值,因为这就是循环结束时的结果。这是一种捕获该值的方法。
for (var key in categories) {
(function(){
var _key = key;
document.getElementById('category' + _key).onclick = function() { showPostsForCategory(_key, categories[_key]); }
})();
}
Edit...
此外,字符串连接并不是创建 html 元素的理想方式。在某些浏览器中,插入文本与文本成为实际 html 元素之间可能存在延迟。
var div = document.createElement('div');
div.onclick = function(){...};
categoriesBlock.appendChild(div);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)