So verbergen Sie Elemente beim Klicken in JQuery

青灯夜游
Freigeben: 2022-12-15 09:55:02
Original
3700 Leute haben es durchsucht

Implementierungsschritte: 1. Verwenden Sie die Funktion click(), um das Klickereignis an das Schaltflächenelement zu binden und die Ereignisverarbeitungsfunktion festzulegen. Die Syntax lautet „$(“button“).click(function() {//Nachdem Klicken Sie auf das Ereignis, führen Sie den Code aus});"; 2. Verwenden Sie in der Ereignisverarbeitungsfunktion die Funktion hide (), um das angegebene Element auszublenden. Die Syntax lautet „$(selector).hide(speed,callback)“.

So verbergen Sie Elemente beim Klicken in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

In jquery können Sie die Methoden click() und hide() verwenden, um Elemente auszublenden, indem Sie darauf klicken.

Implementierungsschritte:

Schritt 1: Verwenden Sie die Funktion click (), um das Klickereignis an das Schaltflächenelement zu binden und die Ereignisverarbeitungsfunktion festzulegen.

$("button").click(function() {
	//点击事件发生后,执行的代码
});
Nach dem Login kopieren

In der Ereignisverarbeitungsfunktion ist der geschriebene Code nach dem Klick implementierter Effektcode

Schritt 2: Verwenden Sie in der Event-Handler-Funktion die Funktion hide(), um das angegebene Element auszublenden

$(selector).hide(speed,callback)
Nach dem Login kopieren

Beispielcode:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").hide();
					$("span").hide();
				});
			});
		</script>
		<style>
			div{
				border: 1px solid red;
				background-color: palegoldenrod;
			}
			p,span{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>需要隐藏的div元素</div>
		<span>需要隐藏的span元素</span>
		<p>p元素</p>
		<button>点击按钮隐藏元素</button>
	</body>
</html>
Nach dem Login kopieren

So verbergen Sie Elemente beim Klicken in JQuery

Anleitung:

  • click() Die Methode wird verwendet, um das Klickereignis zu binden und die Ereignishandlerfunktion festzulegen

Wenn auf das Element geklickt wird, tritt das Klickereignis auf. Die

click()-Methode löst ein Klickereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn ein Klickereignis auftritt.

Syntax:

//触发被选元素的 click 事件:
$(selector).click()

//添加函数到 click 事件:
$(selector).click(function)
Nach dem Login kopieren
  • hide()-Methode wird verwendet, um das angegebene Element auszublenden

  • Geschwindigkeit


Optional. Gibt an, wie schnell der Effekt ausgeblendet wird.

Mögliche Werte: ms"langsam""schnell"Tipp: Weitere Beschleunigungsfunktionen sind in der Erweiterung verfügbar. 【Empfohlenes Lernen: jQuery-Video-Tutorial
easing

    Optional. Gibt die Geschwindigkeit des Elements an verschiedenen Punkten in der Animation an. Der Standardwert ist „swing“.
  • Mögliche Werte:
  • „swing“ – bewegt sich langsam am Anfang/Ende, bewegt sich schnell in der Mitte
  • „linear“ – bewegt sich mit konstanter Geschwindigkeit
Rückruf

    optional. Die Funktion, die ausgeführt werden soll, nachdem die Methode hide() ausgeführt wurde.
Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (haben keinen Einfluss mehr auf das Layout der Seite). Tipp: Um versteckte Elemente anzuzeigen, schauen Sie sich die Methode show() an.
, Web-Frontend-Video

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Elemente beim Klicken in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage