當用戶點擊它時更改影像src是如何作業的？-有解無憂

我正在嘗試創建一個簡單的代碼，如果用戶單擊 gif，它將重復切換到另一個 gif，直到它到達回圈結束時回圈重新開始。這是相關的代碼塊：

var storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif
var onGifClick = function(){
    if (document.getElementById("coloredGif").src === "/images/green.gif"){
        document.getElementById("coloredGif").src = "/images/blue.gif";

    } else if (document.getElementById("coloredGif").src == "/images/blue.gif"){
        document.getElementById("coloredGif").src = "/images/yellow.gif";

    } else if (document.getElementById("coloredGif").src == "/images/yellow.gif"){
        document.getElementById("coloredGif").src = "/images/red.gif";

    } else if (document.getElementById("coloredGif").src == "/images/red.gif"){
        document.getElementById("coloredGif").src = "/images/green.gif";
    }}
storedColoredGif.addEventListener("click", onGifClick);

這非常簡單。所有路徑名稱都是正確的，并且 gifs 源最初是綠色的。程式將 gif 存盤在一個變數中，然后在函式中檢查 gif 的來源，并在用戶單擊 gif 時相應地更改它。但是當我點擊它時沒有任何反應。我在回圈中做錯了嗎？如果我不得不猜測，問題是我正確地更改了源，只是我從不更新 html（但重繪頁面會將 gif 再次設定為綠色，因為那是我在主 html 正文中設定的）。我究竟做錯了什么？

這就是將 gif 放入 html 的方式（green.gif 顯示得很好，只是單擊時它不會在 gif 之間切換）

    <img src="/images/green.gif" id="coloredGif" title="Click me!">

最后編輯：感謝下面 2 個非常有幫助的用戶，我能夠弄清楚獲取 gif 的 src 實際上會回傳完整的域路徑，因此我的 if 陳述句永遠不會進行，因為它們總是錯誤的。他們的兩個解決方案都有效。

解決方案是簡單地解決檢查 src 回傳完整域路徑的事實，而不僅僅是檔案夾和 gif 路徑

uj5u.com熱心網友回復：

將.src回傳路徑的完整字串：http://example.com/img/...而不僅僅是您在if statement.

這是console.log兩者的.src輸出.getAttribute，供您理解：

http://localhost:5501/images/green.gif // Output of .src
/images/green.gif // Output of getAttribute

現在應該更清楚你為什么if statement不作業了：你正在檢查一些false在所有情況下都是簡單的東西。console.log當你遇到這些問題時，不要猶豫，你正在檢查的值，在大多數情況下，它會清除情況。

相反，我的建議是使用.setAttribute來設定和.getAttribute獲取它，這將回傳您正在搜索的正確路徑。

此外，您可以考慮使用let & const而不是var. 這是使用上述兩種方法的代碼。

const storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif

storedColoredGif.addEventListener("click", () => {
    const currentColoredGif = document.getElementById("coloredGif").getAttribute("src")
    if (currentColoredGif == "/images/green.gif") {
        storedColoredGif.setAttribute("src", "/images/blue.gif")
    } else if (currentColoredGif == "/images/blue.gif") {
        storedColoredGif.setAttribute("src", "/images/yellow.gif")
    } else if (currentColoredGif == "/images/yellow.gif") {
        storedColoredGif.setAttribute("src", "/images/red.gif")
    } else if (currentColoredGif == "/images/red.gif") {
        storedColoredGif.setAttribute("src", "/images/green.gif")
    }
})

uj5u.com熱心網友回復：

imgsrc也包含域，為簡單起見只需 check includes，如果字串包含在src

包含方法的作業原理 - MDN 參考

var storedColoredGif = document.getElementById("coloredGif"); //we grab the gif and store it in storedColoredGif
var onGifClick = function() {

  if (document.getElementById("coloredGif").src.includes("/images/green.gif")) {
    document.getElementById("coloredGif").src = "/images/blue.gif";

  } else if (document.getElementById("coloredGif").src.includes("/images/blue.gif")) {
    document.getElementById("coloredGif").src = "/images/yellow.gif";

  } else if (document.getElementById("coloredGif").src.includes("/images/yellow.gif")) {
    document.getElementById("coloredGif").src = "/images/red.gif";

  } else if (document.getElementById("coloredGif").src.includes("/images/red.gif")) {
    document.getElementById("coloredGif").src = "/images/green.gif";
  }
}
storedColoredGif.addEventListener("click", onGifClick);

<img src="/images/green.gif" id="coloredGif" title="Click me!">

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/463114.html

標籤：javascript html

上一篇：從發送到后端的物件中提取鍵：值對

下一篇：使用css或javascript為具有相同id的多個div制作懸停效果的最簡單方法是什么？