javascript - 引用没有 ID 的 div

Question

我在 addEvent(或其他我不知道的东西)方面遇到问题。这是我的代码。
HTML:

<div style="background-color:red;height:30px;width:30px;" ></div>
<div style="background-color:yellow;height:30px;width:30px;" ></div>

JS:

function addEvent(elm,ev,fun)//Cross-browser addEvent
{
    if(elm.addEventListener)elm.addEventListener(ev,fun,false);
    else if(elm.attachEvent)
    {
        var r=elm.attachEvent("on"+ev,fun);
        return r;
    }
}

function myFun(x)
{
    alert(x.style.backgroundColor);
}

var allDiv=document.getElementsByTagName("div");
myFun(allDiv[0]);//Here it works
for(var i=0;i<allDiv.length;i++) {
      //But not here when you click the div
      addEvent(allDiv[i],
               "click",function(){
                          myFun(allDiv[i])
                       });
}

我希望警报有效，但不使用 ID，也不放置内联 onclick。这可能吗？

http://jsfiddle.net/G9gBS/1/

Answer 1

在 JavaScript 中使用闭包时，您会陷入一个常见的陷阱。我已关闭，但所有点击函数的更改正在使用 allDiv[allDiv.length -1] 调用 myFunc 您可以使用自执行函数来解决此问题

for(var i=0;i<allDiv.length;i++) {
          addEvent(allDiv[i],
                   "click",(function(j) {
                              return function(){
                                       myFun(allDiv[j])
                                     }
                            }(i)));
}

这不再在 i 上关闭(i 从未在分配给点击事件的函数中被引用)。

但是在这种特殊情况下，您可以简单地传递它。在触发事件的元素的上下文中调用事件处理程序，因此您可以执行以下操作

for(var i=0;i<allDiv.length;i++) {
              addEvent(allDiv[i],
                       "click",function(){myFun(this)});
}

使用 jQuery 甚至更短

var myFun function(x)
{
    alert(x.style.backgroundColor);
}

$("div").click(myFun);