Javascript 目标类名，但调用唯一ID上的函数

好的，我将在我见过的最慢的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");

var hoverImage=document.getElementById（“大图像”）；
函数悬停缩放（选择器）{
this.node=document.querySelector（选择器）；
if（this.node==null）{
log（“未找到节点”）；
}
返回this.node.id；
}
hoverZoom.prototype.show=函数（x，y）{
var largeImageSrc=this.node.name；
hoverImage.style.display=“block”；
var largeWidth=hoverImage.offsetWidth；
var largeHeight=hoverImage.offsetHeight；
hoverImage.style.top=y-（大高度/2）+“px”；
hoverImage.style.left=x-（大宽度/2）+“px”；
hoverImage.style.position=“绝对”；
hoverImage.style.background=“url（“+largeImageSrc+”）；
}
hoverZoom.prototype.hide=函数（）{
hoverImage.style.display=“无”；
}
hoverZoom.prototype.checkCoords=函数（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）；
如果（x>=elemLeft&&x=elemTop&&y您应该使用
document.queryselectoral
而不是
document.querySelector
来获取所有节点的列表，而不仅仅是第一个节点。之后，您当然应该将回调附加到所有收集的元素。
我将在我以前见过的最慢的ASP框上运行它，所以我不想查看它ng使用jQuery。jQuery的性能取决于客户端的性能，而不是服务器的性能。实际上，你的小提琴不会弹出任何更大的图像，除非@Chrome@bfavaretto加载整个jQuery文件只会使服务器看起来更慢，因为客户端需要下载文件。我们的目标用户很可能使用拨号。因此那个文件会使事情变慢的down@ProblemFactory我正在运行FF 24.0，它似乎对我有用。至少第一张图片会弹出一张更大的图片。@ChrisFrank好的，我理解。你真是太棒了！我没想到要查询所有的类名。谢谢你的回答，它的帮助是指数级的！！