使用Javascript切换图像src属性

我正在尝试使用Javascript更改HTML图像

src

。我有两个图像Plus.gif和Minus.gif。我插入了HTML

img

标记，并编写了一个Javascript函数来更改单击时的图像

src

问题是，当用户单击图像时，我想再次更改它。 例如，当加载页面时，会显示

Plus.gif

，当用户单击页面时，图像会变为

Plus.gif

我希望如此，当图像是

减.gif

并且用户单击它时，应该将其更改为

加.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>

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; 
}

函数chngimg（）{
var img=document.getElementById（'imgplus'）.src；//='Images/减号.gif'；
如果（img）{
document.getElementById（'imgplus'）.src='Images/Minus.gif'；
}如果（！img）{
document.getElementById（'imgplus'）.src='Images/Plus.gif'；
警报（img）；
}
}

图像标签：

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

一种方法是在函数中添加切换变量：

<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>

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; 
}

---

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

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

HTML

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

Javascript

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

---

看到我为使它工作所做的更改了吗

<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()"   />

函数chngimg（）{
var img=document.getElementById（'imgplus'）.src；
if（img.indexOf（'Plus.gif'）！=-1）{
document.getElementById（'imgplus'）.src='Images/Minus.gif'；
}
否则{
document.getElementById（'imgplus'）.src='Images/Plus.gif'；
}
}

---

希望这能解决您的问题。

我在纯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();
}

---

理想情况下，您应该避免使用全局变量

toggle

，这样解决方案就可以重用。那么现在我必须使用

chngimg（）

或

cngimg（）

？@user1583775与您使用的同一个函数，这只是一个输入错误。是的，这就是问题。koool