相关疑难解决方法(0)

Javascript臭名昭着的循环问题?

我有以下代码片段.

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)

以上两个片段均引自此处.正如作者的解释,似乎关闭使魔术.

但它是如何工作的以及闭包如何使其工作都超出了我的理解范围.为什么第一个不工作而第二个工作?任何人都可以详细解释这个魔法吗?

谢谢.

javascript closures

216
推荐指数
5
解决办法
7万
查看次数

addEventListener使用for循环和传递值

我正在尝试使用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)

javascript for-loop addeventlistener

75
推荐指数
3
解决办法
5万
查看次数

获取点击元素onclick

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]不在函数范围内.如何点击元素以便我可以切换它的下一个兄弟?

javascript onclick

4
推荐指数
1
解决办法
6947
查看次数

链接在JavaScript中不起作用

链接在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)

html javascript jquery

-1
推荐指数
1
解决办法
74
查看次数