使用JQuery替换ASP.NET图像按钮中的图像URL？

Question

我在asp.net和mysql中工作。将在页面中显示房间的详细信息，其中包含获取mysql数据库的图像。当我点击小尺寸图像按钮时，主图像将会改变。

我想将Image1 ImageUrl“〜/ GetRoomImage.aspx？id = 1”替换为“〜/ GetRoomImage.aspx？id = 2”或“〜/ GetRoomImage.aspx？id = 3”，如下所示。点击regading imagebutton时。

请帮助我在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)
   });
});