Question

我正在创建一个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:LinkButton/>内的<ASP:Gridiew/>。

<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方面拥有更广泛的知识。

请帮我解决这个问题。我已经做过研究，并询问来自不同地点的其他专家，但仍无法帮助我。

Answer 1

在您的JS文件中，尝试替换以下行：

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

这一个：

var result = $('#' + e.target.id).data("id");

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

1 个答案: