JavaScript数组-迭代问题

我正在构建一个（非常）迷你JS框架，用于定制我的易趣物品。我确实知道如何绕过他们的“无远程脚本”策略，我可以使用jQuery，但这实际上是一个让自己在JS方面做得更好的练习

我有一个全局窗口对象的函数，它返回一组方法，如下所示：

window.iq = (function(){
    return {
        tag: function(tag) {
            return document.getElementsByTagName(tag);
        },

        map: function(el, attr) {
            var arr = [];
            el = iq.tag(el);
            for (i = 0; i < el.length; i++) {
                var x = el[i].getAttribute(attr);
                    arr.push(x);
            }
            return arr;
        },

        // A bunch of others like this
    };
})();

我可以随心所欲地循环浏览前两个图像，但只要我单击第二个图像之外的任何图像，该函数就只会继续为其工作，并在数组中创建后续索引。我猜这要么是我的

map

方法的问题，要么可能与数组长度有关？我不知道。我很困惑。如有任何想法或建议，我们将不胜感激

---

FIDDLE:

问题确实在于您的单击回调。淡出选择器正在查找第一个不是data name=dn[i]的图像，该图像总是“一”（如果单击2）或“两”（如果单击1）。您需要使用selAll来获取所有不是单击的元素，或者跟踪当前选择的元素。以下是两种修复方法

// Make sure they are all hidden
iq.click('#mblThumbs img', function(){
var dn = iq.map('img', 'data-name');
for (i = 0; i < dn.length; i++) {
    if (this.getAttribute('data-name') === dn[i]) {
        var outs = iq.selAll('#mblSlide img:not([data-name="' + dn[i] + '"])');
        for (var j = 0; j < outs.length; j++) {
            iq.fadeOut(200, outs[j]);
        }
        iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
    }
}

});

// Or keep track of the currently selected
var selected = "one";
iq.click('#mblThumbs img', function(){
    var dn = iq.map('img', 'data-name');
    for (i = 0; i < dn.length; i++) {
        if (this.getAttribute('data-name') === dn[i] && dn[i] !== selected) {
            iq.fadeOut(200, iq.sel('#mblSlide img[data-name="' + selected + '"]'));
            iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
            selected = dn[i];
        }
    }
});

//确保它们都是隐藏的
iq.点击（'mblThumbs img'，函数（）{
var dn=iq.map（'img'，'data name'）；
对于（i=0；i

您的迭代变量（都命名为

i

）是！使用

var

将它们声明为本地。先解决这个问题，你当然是对的。这并不会影响我目前的代码，但这是草率的工作。谢谢又一次：）哇，我想我是疯了。这一点现在已经很清楚了，我看到它被写出来了，实际上我试过了，并放弃了它，因为它当时不起作用。我一定是把语法弄错了。非常感谢！顺便说一句，请看第一个例子。

// Make sure they are all hidden
iq.click('#mblThumbs img', function(){
var dn = iq.map('img', 'data-name');
for (i = 0; i < dn.length; i++) {
    if (this.getAttribute('data-name') === dn[i]) {
        var outs = iq.selAll('#mblSlide img:not([data-name="' + dn[i] + '"])');
        for (var j = 0; j < outs.length; j++) {
            iq.fadeOut(200, outs[j]);
        }
        iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
    }
}

});

// Or keep track of the currently selected
var selected = "one";
iq.click('#mblThumbs img', function(){
    var dn = iq.map('img', 'data-name');
    for (i = 0; i < dn.length; i++) {
        if (this.getAttribute('data-name') === dn[i] && dn[i] !== selected) {
            iq.fadeOut(200, iq.sel('#mblSlide img[data-name="' + selected + '"]'));
            iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
            selected = dn[i];
        }
    }
});