使用 Javascript 切换图像 src 属性答案

【问题标题】：Toggle image src attribute using Javascript使用 Javascript 切换图像 src 属性
【发布时间】：2012-08-26 21:23:27
【问题描述】：

我正在尝试使用 Javascript 更改 HTML 图像 src。我有两张图片 Plus.gif 和 Minus.gif。我已经插入了 HTML img 标签并编写了一个 Javascript 函数来在点击时更改图片 src。

问题是当用户单击图像时我想再次将其更改回来。例如，当页面加载时，Plus.gif 显示，当用户点击它时，图像变为Minus.gif。

我想要这样，当图像是Minus.gif 并且用户点击它时，应该将其更改为Plus.gif。

这是我的 Javascript 函数：

<script language="javascript" type="text/javascript">
  function chngimg() {
    var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif';

    if (img) {
      document.getElementById('imgplus').src = 'Images/Minus.gif';
    } else if (!img) {
      document.getElementById('imgplus').src = 'Images/Plus.gif';
      alert(img);
    }

  }
</script>

图片标签：

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />

【问题讨论】：

标签： javascript imageurl

【解决方案1】：

查看我为使其正常工作所做的更改

<script language="javascript" type="text/javascript">
    function chngimg() {
        var img = document.getElementById('imgplus').src;
        if (img.indexOf('Plus.gif')!=-1) {
            document.getElementById('imgplus').src  = 'Images/Minus.gif';
        }
         else {
           document.getElementById('imgplus').src = 'Images/Plus.gif';
       }

    }
</script>

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />

希望能解决您的问题。

【讨论】：

【解决方案2】：

一种方法是在你的函数中添加一个 toggle 变量：

var toggle = false;
function chngimg() {
    if (toggle === true) {
        document.getElementById('imgplus').src  = 'Images/Minus.gif';
    } else {
       document.getElementById('imgplus').src = 'Images/Plus.gif';
       alert(img); 
    }
    toggle = !toggle; 
}

请注意，在这种情况下使用精灵是一种更好的做法。如果你使用两张图片，用户体验会很笨拙，因为他们第一次点击图片时，第二张图片加载时会有一点延迟。

理想情况下，您会将这两个图像作为精灵表，并使用 JQuery。然后你就可以这样做了。

HTML

<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />

CSS

#imgplus .clicked { background-position: 0 -30px; }

Javascript

function chngimg() {
    $("#imgplus").toggleClass("clicked");
}

【讨论】：

理想情况下，您应该避免使用全局变量toggle，以便解决方案可重复使用。
那么现在我必须使用哪个功能chngimg() 或cngimg() ??
@user1583775 与您使用的相同，只是一个错字。
最佳解决方案

【解决方案3】：

我已经在纯JS中成功使用了这个通用解决方案来解决切换img url的问题：

function toggleImg() {
  let initialImg = document.getElementById("img-toggle").src;
  let srcTest = initialImg.includes('initial/img/url');
  let newImg = {
    'true':'second/img/url', 
    'false':'initial/img/url'}[srcTest];

  return newImg;
}

然后在您使用的任何事件处理程序中调用 toggleImg()....

someButton.addEventListener("click", function() {
  document.getElementById("img-toggle").src = toggleImg();
}

【讨论】：