Analyser le pointeur de ceci dans l'événement click dans jQuery-js tutoriel-php.cn

Analyser le pointeur de ceci dans l'événement click dans jQuery

PHPz

Libérer： 2024-02-28 21:54:03

original

1233 Les gens l'ont consulté

Analyser le pointeur de ceci dans lévénement click dans jQuery

Le pointage de ceci dans l'événement click dans jQuery est un problème qui déroute souvent les débutants. Dans jQuery, cela fait généralement référence à l'élément en cours de traitement, mais dans un événement de clic, cela indiquera différemment. Cet article analysera en détail l'intérêt de ceci dans l'événement click dans jQuery et joindra des exemples de code spécifiques.

Dans jQuery, divers événements peuvent être liés à des éléments en utilisant la méthode de liaison d'événement, la plus courante étant l'événement click. Lorsque l'utilisateur clique sur un élément, l'événement click sera déclenché, et celui-ci pointera vers l'élément qui a déclenché l'événement. Cependant, les choses ne sont pas toujours aussi simples et l'endroit où cela se produit dans un événement de clic peut être affecté par d'autres facteurs.

Voici un exemple de code simple :

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

Copier après la connexion

Dans le code ci-dessus, nous avons deux boutons, tous deux ont le même nom de classe "btn". Lorsqu'un bouton est cliqué, l'événement click sera déclenché et la console affichera le contenu textuel du bouton cliqué. Dans cet exemple, cela pointe vers l'élément bouton lui-même qui a déclenché l'événement click, vous pouvez donc obtenir l'objet jQuery du bouton actuel via $(this), puis obtenir le contenu textuel du bouton via la méthode .text() .

Si on modifie un peu le code :

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

Copier après la connexion

Dans ce code modifié, l'élément bouton est enveloppé dans un élément div. Lorsque l'on clique sur le bouton, cela pointe toujours vers l'élément bouton lui-même, et non vers son élément parent div. Par conséquent, l'objet jQuery qui encapsule l'élément parent du bouton ne peut pas être obtenu directement via $(this). Dans ce cas, vous pouvez utiliser $(this).parent() pour obtenir l'élément parent qui enveloppe le bouton et effectuer d'autres opérations.

En général, l'intérêt de ceci dans l'événement de clic dépend de l'élément qui a déclenché l'événement. Si vous avez besoin d'obtenir l'élément de l'événement click, vous pouvez utiliser $(this) pour opérer. Si vous avez besoin d'obtenir d'autres éléments associés, vous pouvez les obtenir via l'élément parent de $(this) ou d'autres méthodes jQuery. Maîtriser ce domaine dans les événements de clic peut aider les développeurs à mieux gérer les événements et à mieux exploiter les éléments DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!