目标类名,但使用唯一ID调用函数

Target class name but call function on unique ID

本文关键字:唯一 ID 调用 函数 目标      更新时间:2023-09-26

好的,我将在我以前见过的最慢的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/

感谢大家的帮助。在过去的几年里,你们帮了我多少忙,我说得再多也不为过。

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