Question

var imgRole = "grvMyRoles_ctl05_imgMyRoleDetail";
    var res = imgRole.substr(11, 5);

$(document).ready(function() {
    var offsetY = -110;
    var offsetX = -370;

    $("#grvMyRoles_" + res + "_imgMyRoleDetail").hover(function(e) {
        $("#grvMyRoles_" + res + "_divMyRoleDetails").fadeIn(400);
        $("#grvMyRoles_" + res + "_divMyRoleDetails").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    }, function() {
         $("#grvMyRoles_" + res + "_divMyRoleDetails").hide();
    });

    $("#grvMyRoles_" + res + "_imgMyRoleDetail").mousemove(function(e) {
        $("#grvMyRoles_" + res + "_divMyRoleDetails").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    });
});

这与静态ID一起正常工作。在这里，我将“grvMyRoles_ctl05_imgMyRoleDetail”作为静态图像ID传递给GridView。当我在它上面盘旋时，它应该显示带有内容的动态div。在这里，我传递“#grvMyRoles_”+ res +“_ divMyRoleDetails”作为静态div（因为'res'在这里对于image和div的id保持不变）但是我希望在动态图像的悬停效果上显示动态div内容。

请帮忙。

Answer 1

如果您正在使用asp.net webforms（正如我从您的代码中看到的那样），请尝试使用<% grvMyRoles.ClientID %>而不是substring。

var imgRoleIdSelector = '#' + <%= grvMyRoles.ClientID %> 

$(document).ready(function() {
    var offsetY = -110;
    var offsetX = -370;

    $(imgRoleIdSelector).hover(function(e) {
        $(imgRoleIdSelector).fadeIn(400);
        $(imgRoleIdSelector).css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    }, function() {
         $(imgRoleIdSelector).hide();
    });

    $(imgRoleIdSelector).mousemove(function(e) {
        $(imgRoleIdSelector).css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    });
});

参考： https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx

如何在网格中获取图像的动态ID并在图像悬停时显示div

1 个答案: