jquery - 使用 JQuery 替换 ASP.NET 图像按钮中的图像 url？

Question

我在 asp.net 和 mysql 中工作。将在页面中显示房间的详细信息以及获取 mysql 数据库的图像。当我单击小尺寸图像按钮时，主图像会发生变化。

我想像这样将 Image1 ImageUrl "~/GetRoomImage.aspx?id=1" 替换为 "~/GetRoomImage.aspx?id=2" 或 "~/GetRoomImage.aspx?id=3"。单击重新调整图像按钮时。

请帮我在 Jquery 中得到这个。

我的代码，..

<asp:Image ID="Image1" runat="server" ImageUrl="~/GetRoomImage.aspx?id=1" Height="178" Width="178"></asp:Image>   <br /><br />
                      &nbsp;
                     <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/GetRoomImage.aspx?id=2" Height="30" Width="37" /> &nbsp;
                     <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/GetRoomImage.aspx?id=3" Height="30" Width="37" />&nbsp;
                     <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/GetRoomImage.aspx?id=4" Height="30" Width="37" />&nbsp;
                     <asp:ImageButton ID="ImageButton5" runat="server" ImageUrl="~/GetRoomImage.aspx?id=5" Height="30" Width="37" />

Answer 1

您可以在页面加载时为每个小图像单击绑定一个事件，并将 src 从小图像分配到大图像。

$(document).ready(function(){
      $('input[type=image]').click(function(){

          var newImg = $(this).attr("src");
           $("#Image1").attr("src",newImg)
       });
}); 

Answer 2

尝试这个

$(document).ready(function(){
  $("[value ^= 'ImageButton']").click(function(){
      var newImg = $(this).attr("src");
       $("#Image1").attr("src",newImg)
   });
});