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方法的问题，或者可能与数组长度有关？我不知道。我很沮丧。任何想法或建议都非常感谢。

FIDDLE：http://jsfiddle.net/h8z7c/

Answer 1

问题确实在于您的点击回调。您的淡出选择器正在查找第一个不是data-name = dn [i]的图像，它始终是＆＃34; one＆＃34; （如果你点击2），或者＆＃34;两个＆＃34; （如果你点击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];
        }
    }
});

JavaScript数组 - 迭代麻烦

1 个答案: