我有以下代码片段.
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
document.body.appendChild(link);
}
}
Run Code Online (Sandbox Code Playgroud)
上面的代码用于生成5个链接,并使用alert事件绑定每个链接以显示当前链接ID.但它不起作用.当您单击生成的链接时,他们都会说"链接5".
但是以下代码片段可以满足我们的期望.
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function (num) {
return function () {
alert(num);
};
}(i);
document.body.appendChild(link);
}
}
Run Code Online (Sandbox Code Playgroud)
以上两个片段均引自此处.正如作者的解释,似乎关闭使魔术.
但它是如何工作的以及闭包如何使其工作都超出了我的理解范围.为什么第一个不工作而第二个工作?任何人都可以详细解释这个魔法吗?
谢谢.
我正在尝试使用for循环向多个对象添加事件侦听器,但最终会将所有侦听器定位到同一个对象 - >最后一个.
如果我通过为每个实例定义boxa和boxb来手动添加侦听器,它就可以工作.我想这就是addEvent for-loop,它不像我希望的那样工作.也许我完全使用了错误的方法.
使用4个class ="container"的示例容器4上的触发器按照预期的方式工作.触发容器1,2,3触发容器4上的事件,但仅在触发器已被激活时触发.
// Function to run on click:
function makeItHappen(elem, elem2) {
var el = document.getElementById(elem);
el.style.backgroundColor = "red";
var el2 = document.getElementById(elem2);
el2.style.backgroundColor = "blue";
}
// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");
for (var i = 0; i < elem.length; i += 2) {
var k = i + 1;
var boxa = elem[i].parentNode.id;
var boxb = elem[k].parentNode.id;
elem[i].addEventListener("click", function() {
makeItHappen(boxa, boxb);
}, false);
elem[k].addEventListener("click", function() {
makeItHappen(boxb, …Run Code Online (Sandbox Code Playgroud)var submenus = document.getElementsByClassName("submenu");
for (var i = 0; i < submenus.length; i++) {
submenus[i].onclick = function() {
toggle(submenus[i].nextSibling);
return false;
}
}
function toggle(el) {
if (el.style.display == 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
Run Code Online (Sandbox Code Playgroud)
导致错误: TypeError: submenus[i] is undefined
我假设submenus[i]不在函数范围内.如何点击元素以便我可以切换它的下一个兄弟?
链接在HTML中设置时有效,但不在JavaScript中.这些功能将更改为另一个页面.JavaScript链接正确显示图像和名称,但通过单击链接,我得到"语法错误"的特定错误.尝试了不同的引号,但它不起作用,我现在很无能为力.
$("#readerList").append("<li><a href='#' onclick='getSpecificReader(" + val.name + ")' ><img src='" + val.image_url + "'>" + val.name + "</a></li>");
Run Code Online (Sandbox Code Playgroud)
<li><a href="#" onclick="getReaderByType('Gate Reader')">Gate Readers<span class="ui-li-count">25</span></a></li>Run Code Online (Sandbox Code Playgroud)