Menghuraikan penunjuk ini dalam acara klik dalam jQuery-tutorial js-php.cn

Menghuraikan penunjuk ini dalam acara klik dalam jQuery

PHPz

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

asal

1222 orang telah melayarinya

Menghuraikan penunjuk ini dalam acara klik dalam jQuery

Penunjukan ini dalam acara klik dalam jQuery adalah masalah yang sering mengelirukan pemula. Dalam jQuery, ini biasanya merujuk kepada elemen yang sedang diproses, tetapi dalam acara klik, ini akan menunjukkan secara berbeza. Artikel ini akan menganalisis secara terperinci perkara ini dalam acara klik dalam jQuery, dan melampirkan contoh kod tertentu.

Dalam jQuery, pelbagai acara boleh diikat kepada elemen dengan menggunakan kaedah pengikatan peristiwa, yang paling biasa ialah acara klik. Apabila pengguna mengklik pada elemen, acara klik akan dicetuskan dan ini akan menghala ke elemen yang mencetuskan acara tersebut. Walau bagaimanapun, perkara ini tidak selalunya semudah itu, dan di mana titik ini dalam peristiwa klik mungkin dipengaruhi oleh faktor lain.

Berikut ialah contoh kod mudah:

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

Salin selepas log masuk

Dalam kod di atas, kami mempunyai dua butang, kedua-duanya mempunyai nama kelas yang sama "btn". Apabila sebarang butang diklik, acara klik akan dicetuskan, dan konsol akan mengeluarkan kandungan teks butang yang diklik. Dalam contoh ini, ini menunjuk kepada elemen butang itu sendiri yang mencetuskan peristiwa klik, supaya anda boleh mendapatkan objek jQuery butang semasa melalui $(this), dan kemudian mendapatkan kandungan teks butang melalui kaedah .text() .

Jika kita mengubah suai kod sedikit:

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

Salin selepas log masuk

Dalam kod yang diubah suai ini, elemen butang dibalut di dalam elemen div. Apabila butang diklik, ini masih menunjuk kepada elemen butang itu sendiri, bukan div elemen induknya. Oleh itu, objek jQuery yang membalut elemen induk butang tidak boleh diperoleh secara langsung melalui $(this). Dalam kes ini, anda boleh menggunakan $(this).parent() untuk mendapatkan elemen induk yang membalut butang dan melaksanakan operasi selanjutnya.

Secara umum, perkara ini dalam acara klik bergantung pada elemen yang mencetuskan acara tersebut. Jika anda perlu mendapatkan elemen acara klik, anda boleh menggunakan $(this) untuk beroperasi. Jika anda perlu mendapatkan elemen lain yang berkaitan, anda boleh mendapatkannya melalui elemen induk $(this) atau kaedah jQuery yang lain. Mahir dalam hal ini dalam acara klik boleh membantu pembangun mengendalikan acara dengan lebih baik dan mengendalikan elemen DOM.

Atas ialah kandungan terperinci Menghuraikan penunjuk ini dalam acara klik dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!