Jquery Onclick e riferimento all'oggetto su cui è stato fatto clic

Question

Ho la seguente espressione jQuery, All'interno della funzione ho bisogno di un riferimento all'oggetto su cui è stato fatto clic, c'è un modo per farlo?

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

Answer 1

Usa

$(this)

Answer 2

puoi usare il valore di ritorno

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

oppure, se lo desideri, puoi semplicemente puntare all'oggetto in modalità jQuery

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

se non conosci jQuery, ti consiglio vivamente di vedere alcuni screencast da Remy Sharp in jQuery for Designers , sono ottimo per capire un po 'di come funziona jQuery e, meglio ancora, come usare console.log () per vedere gli oggetti che puoi usare!

Answer 3

Sì, la parola chiave this fa riferimento all'elemento DOM su cui è stato fatto clic. Puoi " avvolgere " così:

$(this)

Questo ti permetterà di trattarlo come un oggetto jQuery.

Answer 4

La parola chiave questa è ciò che stai cercando. Spesso vorrai applicare la funzione jQuery a questo per fare il tuo lavoro. Esempio:

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

Answer 5

Aggiunta di una nuova risposta che coprirà più casi d'uso, in particolare quando si desidera utilizzare le funzioni freccia.

Si consiglia inoltre di non aggiungere un clic JS a un elemento li. Invece dovresti usare un pulsante o un ancoraggio (qualcosa cliccabile) nidificato all'interno di questo elemento.

Poiché l'elemento su cui fai clic potrebbe essere figlio, devi assicurarti di scegliere come target l'elemento corretto.

Nel mio esempio, assegnerò il clic a un pulsante all'interno di li e ad una classe su di esso. Il markup sarà semplicemente:

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

Quindi il 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
});

Questo assicura che stai prendendo di mira l'elemento su cui è stato registrato il clic. Se hai un markup nidificato all'interno del tuo pulsante (come o), è possibile che la destinazione dell'evento sia l'elemento nidificato anziché l'elemento a cui desideri assegnare il clic.