想要在客户端单击时使用javascript更改ImageButton的图像源

Want to change image src of ImageButton using javascript on client click

本文关键字：更改 javascript ImageButton 图像 客户端 单击      更新时间：2023-09-26

我先尝试了这个不起作用：

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';"/>

另一种方法：

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick=" return changeImg(this)"/>    
 function changeImg(cnt)
    {
    if(cnt.src='minus.gif')
    {
    cnt.src='plus.gif';
    }
    else
    {
    if(cnt.src='plus.gif')
    {
    cnt.src='minus.gif';
    }
    }
    return false;
    }
    </script>

这里的问题是，在客户端单击时，您不会返回 false，而是在代码隐藏时触发 onlick。只需返回 false; 以避免回发，你会得到你尝试的。

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';return false;"/>

更新

在代码上键入 if(cnt.src='plus.gif') ，但必须键入 == ，而不是=

为了避免这种类型的错误，最好将常量放在第一位，例如类型

if('plus.gif' == cnt.src)

和最终代码

function changeImg(cnt)
    {
      if(endsWith(cnt.src, 'minus.gif'))
      {
        cnt.src='plus.gif';
      }
      else if(endsWith(cnt.src, 'plus.gif'))
      {
         cnt.src='minus.gif';
      }          
      // to avoid post back return false
      return false;
    }
function endsWith(str, suffix) {
   return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

relative ： endsWith in JavaScript

以下内容应该有效

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif"  onClick="function(){this.setAttribute("src", 'plus.gif');}"/>
相关文章：