Klicken Sie, um das Bild zu vergrößern, klicken Sie erneut, um zur vorherigen Größe zurückzukehren

Question

Ich möchte in der Lage sein, auf ein Bild zu klicken, es groß werden zu lassen und es dann wieder klein zu machen . Ich versuche, eine if/else-Anweisung zu verwenden, um dieses Problem zu lösen, aber ich kann es immer noch nicht herausfinden. Dies ist die JS Ich habe bisher:

document.addEventListener("DOMContentLoaded", function(event) { 
var thumbnailElement = document.getElementById("smart_thumbnail"); 

if (thumbnailElement.className === "small") { 
    thumbnailElement.addEventListener("click", function() { 
    thumbnailElement.className = ""; 
    }); 
} else { 
    thumbnailElement.addEventListener("click", function() { 
    thumbnailElement.className = "small"; 
    }); 
} 
}); 

Und der HTML-Code für das Bild:

<img class="small" id="smart_thumbnail" src="http://4.bp.blogspot.com/-QFiV4z\ 
3gloQ/ULd1wyJb1oI/AAAAAAAAEIg/LE1Kakhve9Y/s1600/Hieroglyphs_Ani-papyrus.jpg"> 

ich einfach wollte ich von der „kleinen“ Klasse auf der id „smart_thumbnail“ loszuwerden um es groß zu machen und die "kleine" Klasse zurück zu stellen, um es wieder klein zu machen, aber ich kann es nur groß machen. Wenn ich das zweite Mal anklicke, macht es nichts. Ich habe eine if/else if-Anweisung versucht und das hat nicht funktioniert. Ich habe hier nach der gleichen Frage gesucht, konnte aber nur Sachen über jQuery finden. Versuchen, dies nur mit JavaScript zu lösen.

Jede Hilfe sehr geschätzt. Vielen Dank!

Answer 1

Das Problem ist, dass der obige Code nur einmal ausgeführt wird: Nach dem Laden Ihrer Website. Also nur eine Bedingung erfüllt ist (thumbnailElement.className === "small")

Was Sie wollen, ist etwas entlang der Linien von:

var thumbnailElement = document.getElementById("smart_thumbnail"); 

thumbnailElement.addEventListener("click", function() { 
    if (this.className === "small") 
    this.className = ""; 
    else 
    this.className = "small"; 
}); 

Dies wird die Klasse überprüfen, wenn das Bild klicken.

Alternativ können Sie auch classList.toggle

Answer 2

Das Ereignis DOMContentLoaded wird nur einmal ausgelöst, dh wenn die Seite geladen wird. Führen Sie stattdessen Ihre if-Anweisung auf Pro-Klick-Basis aus.

Zum Beispiel

thumbnailElement.addEventListener("click", function() { 
    if (thumbnailElement.className === "small") { 
     thumbnailElement.className = ""; 
    } else { 
    thumbnailElement.className = "small"; 
    } 
}); 

Jetzt werden Sie das Click-Ereignis einmal registrieren, aber jedesmal, wenn es angeklickt wird, wird es die Klassennamen Logik überprüfen und die Klassennamen entsprechend anzuwenden.