Jquery Onclick et référence à l'objet cliqué

Question

J'ai l'expression jQuery suivante. Dans la fonction, j'ai besoin d'une référence à l'objet sur lequel l'utilisateur a cliqué. Y a-t-il un moyen de le faire?

$('#tagList li').click(function() {
  /* contents */
});

Answer 1

Utiliser

$(this)

Answer 2

vous pouvez utiliser la valeur de retour

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

ou si vous le souhaitez, vous pouvez simplement pointer sur l'objet en mode jQuery

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

si vous êtes nouveau dans jQuery, je vous suggère fortement de visionner des captures d'écran de Remy Sharp dans jQuery for Designers , ils sont Il est bon de comprendre un peu le fonctionnement de jQuery et, mieux encore, comment utiliser console.log () afin de voir les objets que vous pouvez utiliser!

Answer 3

Oui, le mot clé this fait référence à l'élément DOM sur lequel l'utilisateur a cliqué. Vous pouvez "emballer". ça comme ça:

$(this)

Cela vous permettra de le traiter comme un objet jQuery.

Answer 4

Le mot clé this est ce que vous recherchez. Souvent, vous voudrez appliquer la fonction jQuery à this pour faire votre travail. Exemple:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

Answer 5

Ajouter une nouvelle réponse qui couvrira davantage de cas d'utilisation, en particulier lorsque vous souhaitez utiliser les fonctions fléchées.

Il est également recommandé de ne pas ajouter de clic JS à un élément li. Utilisez plutôt un bouton ou une ancre (quelque chose de cliquable) imbriqué dans cet élément.

Étant donné que l'élément sur lequel vous cliquez peut être un enfant, vous devez vous assurer de cibler le bon élément.

Dans mon exemple, je vais assigner le clic à un bouton à l'intérieur du li ainsi qu'à une classe dessus. Le balisage sera simplement:

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

Ensuite, le javascript:

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

Cela garantit que vous ciblez l'élément sur lequel le clic a été enregistré. Si vous avez des balises imbriquées dans votre bouton (telles que ou), il est possible que la cible de l'événement soit l'élément imbriqué plutôt que l'élément auquel vous souhaitez affecter le clic.