Analysieren Sie den Zeiger davon im Click-Ereignis in jQuery-js-Tutorial-php.cn

Analysieren Sie den Zeiger davon im Click-Ereignis in jQuery

PHPz

Freigeben： 2024-02-28 21:54:03

Original

1234 Leute haben es durchsucht

Analysieren Sie den Zeiger davon im Click-Ereignis in jQuery

Der Hinweis darauf im Click-Event in jQuery ist ein Problem, das Anfänger oft verwirrt. In jQuery bezieht sich dies normalerweise auf das Element, das gerade verarbeitet wird, bei einem Klickereignis zeigt dies jedoch anders. In diesem Artikel wird der Sinn dieses Problems im Click-Ereignis in jQuery detailliert analysiert und spezifische Codebeispiele angehängt.

In jQuery können mithilfe der Ereignisbindungsmethode verschiedene Ereignisse an Elemente gebunden werden. Die häufigste Methode ist das Klickereignis. Wenn der Benutzer auf ein Element klickt, wird das Klickereignis ausgelöst, das auf das Element verweist, das das Ereignis ausgelöst hat. Allerdings liegen die Dinge nicht immer so einfach, und wo dieser Punkt in einem Klickereignis liegt, kann von anderen Faktoren beeinflusst werden.

Hier ist ein einfacher Beispielcode:

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

Nach dem Login kopieren

Im obigen Code haben wir zwei Schaltflächen, beide haben den gleichen Klassennamen „btn“. Wenn auf eine beliebige Schaltfläche geklickt wird, wird das Klickereignis ausgelöst und die Konsole gibt den Textinhalt der angeklickten Schaltfläche aus. In diesem Beispiel verweist dies auf das Schaltflächenelement selbst, das das Klickereignis ausgelöst hat, sodass Sie über $(this) das jQuery-Objekt der aktuellen Schaltfläche und dann über die Methode .text() den Textinhalt der Schaltfläche abrufen können .

Wenn wir den Code leicht ändern:

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

Nach dem Login kopieren

In diesem geänderten Code ist das Button-Element in ein div-Element eingeschlossen. Wenn auf die Schaltfläche geklickt wird, zeigt dies weiterhin auf das Schaltflächenelement selbst und nicht auf das übergeordnete Element div. Daher kann das jQuery-Objekt, das das übergeordnete Element der Schaltfläche umschließt, nicht direkt über $(this) abgerufen werden. In diesem Fall können Sie $(this).parent() verwenden, um das übergeordnete Element abzurufen, das die Schaltfläche umschließt, und weitere Vorgänge auszuführen.

Im Allgemeinen hängt der Sinn dieses Ereignisses im Klickereignis von dem Element ab, das das Ereignis ausgelöst hat. Wenn Sie das Element des Klickereignisses abrufen müssen, können Sie $(this) für die Operation verwenden. Wenn Sie andere verwandte Elemente abrufen müssen, können Sie diese über das übergeordnete Element von $(this) oder andere jQuery-Methoden abrufen. Wenn Sie sich mit Klickereignissen in dieser Richtung auskennen, können Entwickler Ereignisse besser verarbeiten und DOM-Elemente bedienen.

Das obige ist der detaillierte Inhalt vonAnalysieren Sie den Zeiger davon im Click-Ereignis in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!