So ändern Sie die Bildquelle beim Klicken auf eine Quelle und zurück zu einer anderen Quelle bei demselben Klick

Wenn auf die Schaltfläche geklickt wird, muss die Quelle des Bildes geändert werden, und wenn erneut geklickt wird, sollte die Quelle wieder geändert werden Der vorherige. Ein bisschen wie eine Animation der Art, außer, dass ich steuern sie mit einem KnopfSo ändern Sie die Bildquelle beim Klicken auf eine Quelle und zurück zu einer anderen Quelle bei demselben Klick

der Code, die ich versucht haben und gescheitert ist:

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>

Was soll ich in meinem Code ändern oder gibt es eine einfachere Code

Quelle

2017-04-18 Arjun

Sie einen globalen boolean Variable verwenden können. Wenn dies der Fall ist, ändern Sie src in was auch immer und ändern Sie die Variable in false. Wenn false, ändern Sie src in was auch immer und Variable in wahr. –

Versuchen Sie folgendes:

 var x = document.getElementById("myImage") 

     function change(){ 

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

     } 


    </script>

auch kann stattdessen tun der if-Anweisung:

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

Quelle

2017-04-18 05:20:03

danke. es löste das Problem – Arjun

Sie haben vergessen, über ():

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

Quelle

2017-04-18 05:28:19

Immer noch falsch. 'x.src =" a.png "' wird immer als wahr ausgewertet. Sie vergleichen nicht, sondern geben den Wert dort an. – asprin

@asprin ich leave link zu 'if statement') –

Wenn Sie versuchen, das Bild wechseln können Sie nur eine globale Variable verwenden, wie unten:

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

     }

Quelle

2017-04-18 05:28:40 SJPadikkoth

Harikrishnan Weg ist eine Möglichkeit es tun. Eine andere Möglichkeit wäre die Verwendung benutzerdefinierter data-* Attribute.

So Ihre HTML würde:

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

Und Ihre Javascript wäre:

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

einfach realisiert werden Sie Syntaxfehler und einen Tippfehler in Ihrer Lösung hatte.

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

sollte

werden

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

Sie wurden () in Ihrer if Anweisung fehlt und auch eine einzelne = mit der einen Wert zuweisen und nicht die Werte vergleichen.

Quelle

2017-04-18 05:30:55 asprin

Ich denke, das ist das, was Sie sind Sperren:

habe ich so lange die Bilder leider ㅋㅋㅋ Suche

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>

Quelle

2017-04-18 05:47:49 Teocci

So ändern Sie die Bildquelle beim Klicken auf eine Quelle und zurück zu einer anderen Quelle bei demselben Klick

Antwort

Verwandte Themen