jQueryのクリックイベントでthisのポインタを解析します。-jsチュートリアル-php.cn

jQueryのクリックイベントでthisのポインタを解析します。

PHPz

リリース： 2024-02-28 21:54:03

オリジナル

1234 人が閲覧しました

jQueryのクリックイベントでthisのポインタを解析します。

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 サイトの他の関連記事を参照してください。