如何在點擊時將圖像源更改爲單一來源並在同一次點擊時返回不同來源

單擊按鈕時，必須將圖像源更改爲某些內容，並且當再次單擊時，應將源重新更改爲前一個。有點像，只是我有一個按鈕如何在點擊時將圖像源更改爲單一來源並在同一次點擊時返回不同來源

，我曾嘗試和失敗的碼控制它的排序的動畫是：

DOCTYPE html> 
<html> 
    <body> 

     <img id="myImage" src="a.png" alt="a" border="0"> 

     <button type ="button" onclick="change()">Click Me</button> 
    </body> 

    <script> 

     var x = document.getElementById("myImage") 

     function change(){ 

      if x.src="a.png" 

      document.getElementById("myImage").src = "b.png" 

      else x.src="a.png" 

     } 
    </script> 

</html>

我應該在我的代碼更改，還是有一個簡單的代碼

什麼

來源

2017-04-18 Arjun

您可以使用一個全局布爾變量。如果爲true，則將src更改爲任意值並將變量更改爲false。如果錯誤將src更改爲永久變量並且變爲true。 –

試試這個：

 var x = document.getElementById("myImage") 

     function change(){ 

      if (x.src == "a.png") 
       x.src = "b.png" 
      else 
       x.src = "a.png" 

     } 


    </script>

也可以做，而不是如果聲明：

x.src = (x.src == "a.png" ? "b.png" : "a.png");

來源

2017-04-18 05:20:03

謝謝。它解決了問題 – Arjun

你忘了()：

function change(){ 
      if (x.src="a.png") 
      document.getElementById("myImage").src = "b.png" 
      else x.src="a.png" 

     }

MOAR：https://www.w3schools.com/js/js_if_else.asp

來源

2017-04-18 05:28:19

仍然錯誤。 'x.src =「a.png」'將始終評估爲真。你不是在比較，而是在那裏分配價值。 – asprin

@asprin我把鏈接'if語句'） – 2017-04-18 06:51:36

如果你想切換圖像，你可以只用一個全局變量如下：

 var x = 1; 

     function change(){ 
      if (x == 1) 
      { 
       document.getElementById("myImage").src = "../Images/arrow.png"; 
       x = 0; 
      } 
      else 
      { 
       document.getElementById("myImage").src="../Images/Add.png"; 
       x = 1; 
      } 

     }

來源

2017-04-18 05:28:40 SJPadikkoth

Harikrishnan的方式是正在做。另一種方法是使用自定義data-*屬性。

所以，你的HTML將成爲：

<img id="myImage" data-change="b.png" src="a.png" alt="a" border="0">

而JavaScript是：

function change(){ 
    var new_src = x.getAttribute('data-change'); // get the new source 
    x.setAttribute("data-change", x.src); // set the custom attribute to current source 
    x.src = new_src; // set the image source to new source 
}

UPDATE

剛剛意識到你有語法錯誤，並在解決方案中一個錯字。

if x.src="a.png" 
    document.getElementById("myImage").src = "b.png" 
else x.src="a.png"

應該成爲

if(x.src == "a.png") 
    x.src = "b.png" 
else 
    x.src="a.png"

你在你if語句中缺少()，並使用單一=這將分配一個值，而不是比較值。

來源

2017-04-18 05:30:55 asprin

我認爲這是你在被鎖定的內容：

我花了這麼長時間搜索圖片對不起ㅋㅋㅋ

var imgA = 'http://i.imgur.com/v5o8MW8.jpg' 
 
var imgB = 'http://i.imgur.com/v1Vb6RR.jpg' 
 

 
var x = document.getElementById("myImage") 
 

 
function change() { 
 
    x.src = (x.src == imgA ? imgB : imgA); 
 
}

<body> 
 
    <button type="button" onclick="change()">Click Me</button></br> 
 
    <img id="myImage" src="http://i.imgur.com/v5o8MW8.jpg" alt="a" border="0"> 
 
</body>

來源

2017-04-18 05:47:49 Teocci

如何在點擊時將圖像源更改爲單一來源並在同一次點擊時返回不同來源

回答

相關問題