JavaScript 数组 - 迭代问题

Question

我正在构建一个（非常）迷你 JS 框架，用于自定义我的 eBay 列表。 我确实知道如何规避他们的“无远程脚本”政策，并且我可以使用 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
    };
})();

我遇到了麻烦（我的意思是我完全卡住了）遍历data-name属性数组并根据是否匹配来隐藏或显示图像。 这是函数：

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]) {
            iq.fadeOut(200, iq.sel('#mblSlide img:not([data-name="' + dn[i] + '"])'));
            iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
        }
    }
});

我可以随心所欲地循环浏览前两个图像，但是一旦我单击第二个图像之后的任何内容，该函数只会继续为它工作，以及数组中的后续索引。 我猜这是我的map方法的问题，或者可能与数组长度有关？ 我不知道。 我一头雾水。 任何想法或建议都非常感谢。

小提琴： http : //jsfiddle.net/h8z7c/

Answer 1

问题确实出在您的点击回调上。 您的淡出选择器正在查找不是 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];
        }
    }
});