Question

我正在尝试在类上选择元素，将它们放在数组上。对于该类中的每个元素，我想选择“a”标签然后我想为每个元素创建一个监听器，但这对于我来说在JS中似乎是不可能的。这是我到目前为止的代码。

var elemento = new Array();
var y=document.getElementsByClassName("thumbnails");

for (var i=0; i < y.length; i++) {
    elemento = ( y[i].getElementsByTagName("a"));
    elemento[0].addEventListener('click', function(){alert("jo")}, false);
}

这适用于第一个元素，但不适用于其余元素，是的，elemento是[0]，因为每个缩略图中不再有“a”标记。

Answer 1

现代浏览器的一个简短方法是在querySelector中使用CSS选择器：

var elements = document.querySelectorAll('.thumbnails a');
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].addEventListener('click', function() { ... }, false);
}

DEMO： http://jsfiddle.net/AApw2/

Answer 2

虽然.querySelectorAll是一个很好的解决方案，但了解如何在没有它的情况下处理它是很重要的。

您只需要一个内循环来遍历a变量所持有的当前elemento元素集。

var elemento;
var y = document.getElementsByClassName("thumbnails");
var handler = function(){alert("jo")};

for (var i=0; i < y.length; i++) {
    elemento = y[i].getElementsByTagName("a");
    for (var j = 0; j < elemento.length; j++) {
        elemento[j].addEventListener('click', handler, false);
    }
}

请注意，我使用了不同的计数器j作为内循环，因为i已在使用中。

另请注意，我将处理函数移动到循环外的变量。这使得所有元素都使用相同的函数对象，这样更有效。

旁注：

您可能还想创建一些辅助方法来缩短long方法名称，并将它们转换为Arrays。这允许您使用像.forEach()这样的数组方法。

var _slice = Function.call.bind([].slice);

function byClass(ctx, clss) {
    if (typeof ctx === "string") {
        clss = ctx;
        ctx = document;
    }
    return _slice(ctx.getElementsByClassName(clss));
}
function byTag(ctx, tag) {
    if (typeof ctx === "string") {
        tag = ctx;
        ctx = document;
    }
    return _slice(ctx.getElementsByTagName(tag));
}

这会将您的代码缩减为：

var handler = function(){alert("jo")};

byClass("thumbnails").forEach(function(thumb) {
    byTag(thumb, "a").forEach(function(a) {
        a.addEventListener('click', handler, false);
    });
});

选择具有两个选择器的元素

2 个答案: