Jquery Onclick und Referenz auf das Objekt angeklickt

Question

Ich habe den folgenden jQuery Ausdruck bekommt, innerhalb der Funktion Ich brauche eine Referenz auf das Objekt, auf der geklickt wurde, ist es eine Möglichkeit, dies zu tun?

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

Answer 1

Mit

$(this)

Answer 2

Sie können den Rückgabewert verwenden

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

oder wenn Sie wollen, können Sie einfach auf das Objekt in jQuery-Modus

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

Wenn Sie neu in jQuery, Ich empfehle Sie einige Screencasts sehen von Remy Sharp in jQuery für Designer , sie sind groß, ein wenig wie jQuery funktioniert, und noch besser zu verstehen, wie die console.log zu verwenden () , um die Objekte zu sehen, die Sie verwenden können!

Answer 3

Ja, das this Schlüsselwort verweist auf das DOM-Element, das geklickt wurde. Sie können "wrap" es diese mögen:

$(this)

Damit können Sie es als ein jQuery-Objekt zu behandeln.

Answer 4

Die das Stichwort ist das, was Sie suchen. Oft werden Sie die jQuery-Funktion diese tun, um Ihren Job bewerben. Beispiel:

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

Answer 5

Hinzufügen einer neuen Antwort, die mehr Anwendungsfälle abdecken wird, insbesondere, wenn Sie Pfeil Funktionen verwenden möchten.

Es wird auch empfohlen, dass Sie nicht über einen JS Klick auf ein Element li hinzuzufügen. Stattdessen sollten Sie einen Knopf oder Anker verwenden (etwas klickbare) innerhalb dieses Elements verschachtelt sind.

Da das Element, das Sie ein Kind sein klicken können, müssen Sie sicherstellen, dass Sie das richtige Element Ziel.

In meinem Beispiel, werde ich den Klick auf eine Schaltfläche in der li sowie eine Klasse auf sie werden zuweisen. Das Markup wird einfach sein:

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

Dann wird das 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
});

Damit wird sichergestellt, dass Sie das Element abzielen, dass der Klick registriert wurde auf. Wenn Sie irgendeine verschachtelte Markup in Ihrer Taste haben (wie oder), dann ist es möglich, dass das Ereignisziel das verschachtelte Element zu sein, anstatt das Element, das Sie den Klick zuweisen wollte.