0

我正在创建一个 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();
});

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

我想知道我是否在做正确的事情（好吧，我相信没有，因为它不起作用）。我感觉var result = $("#grdlinkFilename").data("id");js 文件中的这段代码也没有返回任何值。

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

请帮我解决一下这个。我已经进行了研究并询问了来自不同站点的其他专家，但仍然没有人能够帮助我。

4

1 回答 1

1

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

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

有了这个：

var result = $('#' + e.target.id).data("id");
于 2013-05-29T08:29:54.697 回答