ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのクリックイベントでthisのポインタを解析します。
jQueryのクリックイベントでthisのポインタを解析します。
- PHPzオリジナル
- 2024-02-28 21:54:031239ブラウズ
jQuery のクリック イベントで this を指定することは、初心者を混乱させることが多い問題です。 jQuery では、これは通常、現在処理されている要素を指しますが、クリック イベントでは、これは異なります。この記事では、jQuery のクリック イベントにおけるこの点を詳細に分析し、具体的なコード例を添付します。
jQuery では、イベント バインディング メソッドを使用してさまざまなイベントを要素にバインドできますが、最も一般的なのはクリック イベントです。ユーザーが要素をクリックすると、クリック イベントがトリガーされ、これはイベントをトリガーした要素を指します。ただし、物事は必ずしもそれほど単純ではなく、クリック イベント内でこのポイントがどこを指すかは、他の要因の影響を受ける可能性があります。
これは簡単なサンプル コードです:
<!DOCTYPE html>
<html>
<head>
<title>jQuery中this在点击事件中的指向</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<script>
$('.btn').click(function() {
console.log($(this).text());
});
</script>
</body>
</html>上記のコードには 2 つのボタンがあり、どちらも同じクラス名「btn」を持ちます。いずれかのボタンがクリックされると、クリック イベントがトリガーされ、クリックされたボタンのテキスト コンテンツがコンソールに出力されます。この例では、this はクリック イベントをトリガーしたボタン要素自体を指しているため、$(this) を通じて現在のボタンの jQuery オブジェクトを取得し、その後 .text() メソッドを通じてボタンのテキスト コンテンツを取得できます。 。
コードを少し変更すると:
<!DOCTYPE html>
<html>
<head>
<title>jQuery中this在点击事件中的指向</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
</div>
<script>
$('.btn').click(function() {
console.log($(this).parent().text());
});
</script>
</body>
</html>この変更されたコードでは、ボタン要素が div 要素内にラップされます。ボタンをクリックすると、これは親要素 div ではなく、ボタン要素自体を指します。したがって、ボタンの親要素をラップする jQuery オブジェクトを $(this) から直接取得することはできません。この場合、$(this).parent() を使用してボタンをラップする親要素を取得し、さらに操作を実行できます。
一般に、クリック イベントにおけるこれのポイントは、イベントをトリガーした要素によって異なります。クリックイベントの要素を取得する必要がある場合は、$(this) を使用して操作できます。他の関連要素を取得する必要がある場合は、$(this) の親要素または他の jQuery メソッドを通じて取得できます。クリック イベントにおけるこの方向に熟練すると、開発者がイベントをより適切に処理し、DOM 要素を操作するのに役立ちます。
以上がjQueryのクリックイベントでthisのポインタを解析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。