So ändern Sie Bilder durch Klicken in JQuery-Front-End-Fragen und Antworten-php.cn

So ändern Sie Bilder durch Klicken in JQuery

青灯夜游

Freigeben： 2022-04-21 15:02:30

Original

6246 Leute haben es durchsucht

Implementierungsmethode: 1. Verwenden Sie click(), um das Klickereignis an das Schaltflächenelement zu binden und die Verarbeitungsfunktion festzulegen. Die Syntax lautet „button element.click(function(){});“ 2. In der Verarbeitungsfunktion Verwenden Sie attr(), um die Bildadresse zu ändern. Die Syntax lautet „$(„img“).attr(„src“, „neue Bildadresse“)“.

So ändern Sie Bilder durch Klicken in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

... Verwenden Sie in der Verarbeitungsfunktion attr(), um die Bildadresse zu ändern (d. h. den Wert des src-Attributs des img-Elements zu ändern).

Implementierungscode:

Klicken Sie auf die Schaltfläche, um das Bild zu ändern

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").attr("src","img/1.jpg");
				});
			});
		</script>
	</head>

	<body>
		<img  src="img/3.jpg"    style="max-width:90%" / alt="So ändern Sie Bilder durch Klicken in JQuery" ><br><br>
		<button>点击按钮，更换图片</button>
	</body>
</html>

Nach dem Login kopieren

Anleitung:
Tags definieren Bilder in HTML-Seiten. Das

-Tag hat zwei erforderliche Attribute: src und alt. Das src-Attribut des

So ändern Sie Bilder durch Klicken in JQuery -Tags ist erforderlich und gibt die URL des Bildes an. Die Methode

attr() kann den Attributwert des angegebenen Elements festlegen. Wenn diese Methode zum Ändern des src-Attributs des verwendet wird.

【Empfohlenes Lernen:

jQuery-Video-Tutorial, Web-Frontend-Video

】

Das obige ist der detaillierte Inhalt vonSo ändern Sie Bilder durch Klicken in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!