我需要帮助，使我的图像工具提示工作

本文关键字：我的 图像 工具提示 工作 帮助 | 更新日期: 2023-09-27 18:15:43

我正在创建一个web应用程序。其中一个页面是递归地扫描服务器D:驱动器中的所有文件夹，包括其所有子文件夹和文件，并将其放在gridview中。此gridview的其中一列包含文件的名称。

我想做的是创建一个图像工具提示，这样当我们将鼠标悬停在任何图像文件上时，它会显示一个包含该图像的弹出窗口。

下面是我的外部js(jquery)文件的代码: 
this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;
    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        var result = $("#grdlinkFilename").data("id");
        result = result.replace(/''/g, "''''");
        result = result.replace(/D:''/i, "http://192.000.0.00/Vdrive/");
        result = result.replace(/''/g, "/");
        $("body").append("<p id='lFilename'><img src='" + result + "'/>" + c + "</p>");
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px")
                       .fadeIn("fast");
    },
    function() {
        this.title = this.t;
        $("#lFilename").remove();
    });
    $(".lFilename").mousemove(function(e) {
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px");
    });
};
$(document).ready(function(){
    screenshotPreview();
});

这是位于<ASP:Gridiew/>内的<ASP:LinkButton/> 

<asp:LinkButton runat="server" CssClass="lFilename" ID="grdlinkFilename"
                Text='<%#Eval("FILENAME")%>'
                CommandArgument='<%#Eval("FILEPATH")%>'
                OnCommand="grdlinkFilename_click"
                data-id='<%#((string)Eval("FILEPATH")).Replace(@"'", @"''")%>'>
</asp:LinkButton>

由于某些原因，它没有按照我期望的方式运行，或者根本没有发生任何事情。

我试着在我的js文件中这样做作为测试:

this.screenshotPreview = function() {
    xOffset = 10;
    yOffset = 30;
    $(".lFilename").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        var result = "D:''sample pix''img.jpg";
        result = result.replace(/D:''/i, "http://192.000.0.00/VDrive/");
        result = result.replace(/''/g, "/");
        $("body").append("<p id='lFilename'><img src='" + result + "'/>" + c + "</p>");
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px")
                       .fadeIn("fast");
    },
    function() {
        this.title = this.t;
        $("#lFilename").remove();
    });
    $(".lFilename").mousemove(function(e) {
        $("#lFilename").css("top", (e.pageY - xOffset) + "px")
                       .css("left", (e.pageX + yOffset) + "px");
    });
};
$(document).ready(function(){
    screenshotPreview();
});

，这可以正常工作，但当然总是显示相同的图像。

我想知道我是否在做正确的事情(嗯，我认为不是，因为它不起作用)。我有一种感觉，js文件中的var result = $("#grdlinkFilename").data("id");代码不返回任何值。

我知道有更多的人在这种情况下有更多的经验，在处理asp.net, c#， javascript或jquery方面有更广泛的知识。

请帮我一下。我已经做了研究，并询问了不同网站的其他专家，但仍然没有人能帮助我。

我需要帮助，使我的图像工具提示工作

在你的JS文件中，尝试替换以下行:

var result = $("#grdlinkFilename").data("id");

和这个:

var result = $('#' + e.target.id).data("id");
相关文章：