jqueryでクリック時に要素を非表示にする方法-フロントエンドQ&A-php.cn

jqueryでクリック時に要素を非表示にする方法

青灯夜游

リリース： 2022-12-15 09:55:02

オリジナル

3743 人が閲覧しました

実装手順: 1. click() 関数を使用してクリックイベントをボタン要素にバインドし、イベント処理関数を設定します。構文は "$("button").click(function() です。 {//クリックイベントが発生その後、実行されたコード});"; 2. イベント処理関数で、hide() 関数を使用して指定された要素を非表示にします。構文は "$(selector).hide(speed) 、折り返し電話）"。

jqueryでクリック時に要素を非表示にする方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jquery では、 click() メソッドと Hide() メソッドを使用して、要素をクリックすることで要素を非表示にすることができます。

#実装手順:

#ステップ 1: click() 関数を使用して、クリックイベントをボタン要素にバインドし、イベント処理関数のセットアップ

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

ログイン後にコピー

イベント処理関数で記述されるコードは、クリック後に実現されるエフェクトコードです。

ステップ 2: イベント処理関数で、次のコードを使用します。 Hide() 関数は、指定された要素を非表示にします。

$(selector).hide(speed,callback)

ログイン後にコピー

サンプルコード:

<!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>

ログイン後にコピー

jqueryでクリック時に要素を非表示にする方法

説明:

click() メソッドは、クリックイベントをバインドし、イベント処理関数を設定するために使用されます。

要素がクリックされると、クリックが行われます。イベントが発生します。

click() メソッドは、クリックイベントをトリガーするか、クリックイベントの発生時に実行する関数を指定します。

構文:

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

//添加函数到 click 事件：
$(selector).click(function)

ログイン後にコピー

hide() メソッドは、指定された要素を非表示にするために使用されます

構文

$(selector).hide(speed,easing,callback)

ログイン後にコピー

##オプション。アニメーション内のさまざまなポイントでの要素の速度を指定します。デフォルト値は「スイング」です。オプション。 Hide()メソッドの実行後に実行される関数。

パラメータ	説明
速度	オプション。エフェクトが非表示になるまでの時間を指定します。可能な値: ミリ秒「遅い」「速い」
緩和	可能な値: 「swing」 - 最初と最後ではゆっくりと動き、中間では速く動きます「linear」 - 一定の速度で動きますヒント: 拡張プラグインでは、さらに多くの利用可能なイージング関数が提供されています。
callbac

パラメータ

説明

速度

オプション。エフェクトが非表示になるまでの時間を指定します。

可能な値: