0 
var thumbs = document.getElementsByClassName('thumbnailImage');
                for(var i=0,len=thumbs.length;i<len;i++){
                    var p = thumbs[i].parentNode;
                    alert('i: '+i+',thumbs[i]: '+thumbs[i].id+',p.tagName: '+p.tagName+',p.class: '+p.className);
                    //unpackchild(thumbs[i]);
                }

function unpackchild(c) {
    var g=c.parentNode.parentNode;g.appendChild(c);
}

拇指中有 5 个图像元素（这是正确的），每个元素都包含在一个锚标记中。当我运行上面的代码时（在文档准备好之后），前三个图像被正确解压缩到祖父母 div，但在最后两个上，我在警报中看到的 id 是前两个的重复，好像 thumbs[3] 现在引用 thumbs [0] 和 thumbs[4] 现在引用 thumbs[1] （ID 是唯一的）。

有没有人看到我可以做些什么来导致这种情况，或者这是 javascript 引用元素的方式所固有的（也许是父母）？

4

3 回答 3

1

将循环更改为：

for( var i=thumbs.length-1; i>=0; i--) {

这将确保系统不会混淆，即使您有具有该类名称的嵌套元素（在这种情况下您可能没有，但一般情况下最好知道；））

于 2013-10-23T17:34:26.930 回答
1

HTMLCollection返回的对象getElementsByClassName是实时的 - 这意味着它可能会在底层 DOM 文档更改时更改。

于 2013-10-23T17:35:56.277 回答
0

结合上面的两个答案，在循环时，我移动元素后发生的任何事情都破坏了对拇指的引用。所以在原版中（我为了这个问题删除了它）我在调用 unpackchild 之后添加了一个事件监听器。在更改为 Niet 建议的反向计数循环后，事件监听器实际上只是在 thumbs 中的第一个元素上添加了 5 次。通过将 addeventlistener 移动到 unpackchild 之前，它被正确地添加到每个元素中。

因此，点击 thumbs[0] 会导致 5 个点击事件触发所有引用 thumbs[0]...

                    var thumbs = document.getElementsByClassName('thumbnailImage'),i=0,len=thumbs.length,c=0,el=[],p;
                    for(i=len-1;i>=0;i--){
                        p = thumbs[i].parentNode;
                        //alert('i: '+i+',thumbs[i]: '+thumbs[i].id+',p.tagName: '+p.tagName+',p.class: '+p.className);
                        thumbs[i].addEventListener('click',(function(t){return function(e){mzremix(t,e);};})(thumbs[i]),false);
                        if(p.tagName == 'A'){ unpackchild(thumbs[i]);p.parentNode.removeChild(p); }
                        thumbs[i].addEventListener('click',(function(t){return function(e){mzremix(t,e);};})(thumbs[i]),false);
                    }

...虽然这会为每个引用 thumbs[i] 的 thumbs[i] 触发正确的 1 个事件

                var thumbs = document.getElementsByClassName('thumbnailImage'),i=0,len=thumbs.length,c=0,el=[],p;
                for(i=len-1;i>=0;i--){
                    p = thumbs[i].parentNode;
                    //alert('i: '+i+',thumbs[i]: '+thumbs[i].id+',p.tagName: '+p.tagName+',p.class: '+p.className);
                    thumbs[i].addEventListener('click',(function(t){return function(e){mzremix(t,e);};})(thumbs[i]),false);
                    if(p.tagName == 'A'){ unpackchild(thumbs[i]);p.parentNode.removeChild(p); }
                }
于 2013-10-23T17:59:33.267 回答