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

jqueryでダブルクリックして要素を非表示にする方法

青灯夜游

リリース： 2022-09-08 19:42:58

オリジナル

1886 人が閲覧しました

実装手順: 1. dblclick() メソッドを使用してダブルクリックイベントをボタン要素にバインドし、イベント処理関数を設定します。構文は "$("button").dblclick() です。 (function() {//イベント処理コード});"; 2. イベント処理関数では、hide() または toggle() メソッドを使用して要素を非表示にします。構文は「要素を指定する object.hide()」です。 ;" または "要素 object.toggle();" を指定します。

jqueryでダブルクリックして要素を非表示にする方法

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

jquery では、dblclick() と hide() (または toggle()) を使用して、マウスをダブルクリックして要素を非表示にすることができます。

実装手順:

ステップ 1: マウスダブルクリックイベントを設定する

dblclick を使用する() ボタン要素にダブルクリックイベントをバインドし、イベント処理関数を設定するメソッド

按钮元素对象.dblclick()(function() {
	//事件处理代码
});

ログイン後にコピー

ステップ 2: イベント処理関数で、hide() または toggle() メソッドを使用して、要素を非表示にする

按钮元素对象.dblclick()(function() {
	指定元素对象.hide();
});

ログイン後にコピー

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").dblclick(function() {
					$("p").hide();
					// $("p").toggle();
				});
			});
		</script>
	</head>
	<body>

		<button>双击按钮，隐藏p元素</button>
		<p>这是一个段落。</p>
		<div>这是一个div元素。</div>

	</body>
</html>

ログイン後にコピー

jqueryでダブルクリックして要素を非表示にする方法