javascript - 目标类名但根据唯一 ID 调用函数

Question

好吧，我将在我见过的最慢的 ASP 机器上运行它，所以我不打算使用 jQuery，我知道这会让一切变得更容易，但我需要保留我的代码尽可能小。 我的目标用户是我所见过的网速最慢的用户，加载整个 jQuery 文件对于他们的互联网来说是太多了。所以我不打算在这个脚本中使用 jQuery。

我正在尝试制作一个脚本，当用户将鼠标悬停在缩略图上时，会弹出更大的图像。我使用以下 JavaScript 来实现此目的:

var hoverImage  = document.getElementById("largeImage");

function hoverZoom(selector) {
    this.node = document.querySelector(selector);
        if(this.node === null) {
            console.log("Node not found");
    }

    return this.node.id;
}

hoverZoom.prototype.show = function(x, y) {
    var largeImageSrc                   = this.node.name;
    hoverImage.style.display            = "block";
    var largeWidth                      = hoverImage.offsetWidth;
    var largeHeight                     = hoverImage.offsetHeight;
    hoverImage.style.top                = y - (largeHeight / 2) + "px";
    hoverImage.style.left               = x - (largeWidth / 2) + "px";
    hoverImage.style.position           = "absolute";
    hoverImage.style.background         = "url(" + largeImageSrc + ")";
}

hoverZoom.prototype.hide = function() {
    hoverImage.style.display    = "none";
}

hoverZoom.prototype.checkCoords = function(x, y) {
    var id              = document.getElementById(this.node.id);
    var elemTop         = id.offsetTop;
    var elemLeft        = id.offsetLeft;
    var elemHeight      = id.offsetHeight;
    var elemWidth       = id.offsetWidth;
    console.log(x + " " + y + " " + this.node.id + " " + id + " " + elemHeight + " " + elemWidth + " " + elemTop + " " + elemLeft);

    if(x >= elemLeft && x <= elemLeft + elemWidth && y >= elemTop && y <= elemTop + elemHeight) {
        return true;
    }
}

document.body.onmousemove = function(e) {
    e           = e || window.event;
    while(hoverZoomPI.checkCoords(e.clientX, e.clientY) === true) {
        var target  = e.target || e.srcElement,
            offsetX = e.clientX,
            offsetY = e.clientY;

            return hoverZoomPI.show(offsetX, offsetY);
    }
    hoverZoomPI.hide();         
}

var hoverZoomPI = new hoverZoom(".test");

我的问题是，当我将鼠标悬停在具有相同类名的另一个图像上时，什么也没有发生。但是当我将鼠标悬停在带有类名的第一张图像上时，它就可以工作了。

我已经用我的所有代码和一个示例设置了一个 jsFiddle:http://jsfiddle.net/f7xqF/

感谢大家的帮助。我无法形容过去几年你们对我的帮助。

Answer 1

您应该使用 document.querySelectorAll 而不是 document.querySelector 来获取所有节点的列表，而不仅仅是第一个节点。之后，您当然应该将回调附加到所有收集的元素。