recherche

Maison >interface Web >js tutoriel >Analyser le pointeur de ceci dans l'événement click dans jQuery

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

PHPz
PHPzoriginal
2024-02-28 21:54:031238parcourir

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>

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>

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!

jquery 对象 事件 dom this
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la méthode de requête GET dans jQueryArticle suivant：Explication détaillée de la méthode de requête GET dans jQuery

Articles Liés

Voir plus