使用Javascript切換圖像src屬性

Question

我試圖使用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()"   />

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

希望能解決你的問題。

Answer 2

一種方法是在函數中添加一個切換變量：

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

CSS

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

使用Javascript

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

Answer 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();
}