使用Javascript查看同一页面上的完整图像

我正试图使它，使我的网页上的图像点击时，将显示一个完整的图像。然而，我的

javascript

似乎并不满意我的

我必须使用图像源，因为我的图像链接到ASP.Net中的

pagegridview

，并且我将其链接到一个名为imgFull的属性。小提琴上的代码用于测试，我的实际代码如下：

CSS:

Javascript:

$("img").click(function(){                                          
    $("#imgBig").attr("src", $(this).attr('fullImg'));
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

ASP.NET中的HTML：

<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent">
    <asp:Image runat="server" ID="imgFull" ImageAlign="AbsMiddle" Width="400" ImageUrl="https://www.google.com/images/srpr/logo11w.png" CssClass="imgBig"/>
</div>

Javascript不是我的强项，一旦这个项目结束，我打算花一些时间来学习它，但目前，我不得不采用“从消防水龙带喝水”的方法，希望我能保留我正在使用的东西。非常感谢您的帮助。

您的打字错误：

$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src"; $(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});

分配给

src

的作业中的分号应为逗号：

$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src", $(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});

---

您首先应该学习的是使用浏览器的开发工具。Chrome内置了很棒的工具（点击F12），但Firefox的Firebug也非常适合Javascript调试。

没错，但我通常会尽可能引导人们使用Chrome或Firefox，因为我发现他们的工具更成熟。@ChrisHardie奇怪的是，上面的演示代码仍然失败，尽管它使用逗号而不是分号。覆盖会使页面变灰，但图像本身无法显示。小提琴是我用来测试的，我在问题中放置的代码是主要关注点，因为可以说是“活”代码。@ChrisHardie好吧，用Chrome中的调试工具看，图像没有被命名为fullImg，它被命名为

ctl00\u Main\u imgFull

。这就是问题所在，当我将Google图像设置为imgFull的默认源时，由于某种原因，它没有被放置在覆盖层上……您的图像被放置在ASP.Net页面的命名容器中。您可以A）不使用图像的服务器控件B）使用

ClientId

或

CssClass

属性来获得更可预测的选择器。@ChrisHardie因此可以使用更多类似于

$（“”）的内容。
$.attr（“src”，“$”（this.attr（'fullImg'）；
？
$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src", $(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});