Bagaimana cara menambahkan pendengar acara individu menggunakan jquery .each ()?
Saya memiliki pengaturan sederhana: Dua tombol dengan nilai berbeda. Saya ingin menggunakan fungsi .each () dari jquery untuk menambahkan event listener klik ke setiap tombol yang hanya mencatat nilai setiap tombol. Tetapi entah bagaimana saat menggunakan .each (), jquery menimpa handler klik untuk tombol sebelumnya. Ini membuat saya memiliki dua pertanyaan:
- Mengapa demikian?
- Bagaimana cara menambahkan pendengar acara individu ke koleksi objek jquery?
Lihat kode di bawah ini
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => { $(`button[toggle]`).each((_, button) => {
let $toggle = $(button);
type = $toggle.attr("type"); value = $toggle.attr("value");
$toggle.on("click", () => {
console.log(type, value);
});
});
});
</script>
</head>
<body>
<div>
<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>
</div>
</body>
</html>Jawaban
Masalah dalam kode Anda adalah karena Anda secara implisit mendeklarasikan variabel typedan value, sehingga mereka berada dalam windowcakupan. Dengan demikian, setiap iterasi berikut menimpa nilai sehingga hanya nilai akhir yang terlihat setelah pengulangan berakhir.
Untuk memperbaikinya, tentukan variabel dalam loop:
$(() => { $(`button[toggle]`).each((_, button) => {
let $toggle = $(button);
let type = $toggle.attr("type"); let value = $toggle.attr("value");
$toggle.on("click", () => {
console.log(type, value);
});
});
});<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>
</div>Namun , Anda tidak membutuhkaneach()loop sama sekali. Anda dapat memperbaiki masalah dan meningkatkan kualitas kode dengan mengikat pengendali kejadian yang sama ke semuabuttonelemen dan menggunakantargetproperti kejadian yang dimunculkan untuk mengakses atributnya.
Selain itu, perhatikan bahwa menambahkan atribut non-standar Anda sendiri, toggledalam hal ini, dapat menyebabkan masalah di UI dan JS. Pendekatan yang lebih baik adalah menggunakan kelas untuk mengelompokkan elemen.
Terakhir, onedan twobukan nilai yang valid untuk typeatribut tersebut. Gunakan dataatribut sebagai gantinya untuk melampirkan metadata khusus Anda sendiri ke sebuah elemen.
Dengan semua yang dikatakan, coba ini:
jQuery($ => {
$('.toggle').on('click', e => { let $toggle = $(e.target); let type = $toggle.data("type");
let value = $toggle.prop("value");
console.log(type, value);
});
});<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<button class="toggle" data-type="one" value="true">One</button>
<button class="toggle" data-type="two" value="false">Two</button>
</div>gunakan $(this)di dalam callback klik
$(() => {
$(`button[toggle]`).each((_, button) => { $(button).on("click", function(){
type = $(this).attr("type"); value = $(this).attr("value");
console.log(type, value);
});
});
});<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>Dan juga tidak perlu menyebutkan di dalam setiap callback. Anda bisa menelepon dengan cara biasa seperti di bawah ini
$(() => { $(`button[toggle]`).on("click", function(){
type = $(this).attr("type"); value = $(this).attr("value");
console.log(type, value);
});
});<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>- Karena pendengar terikat ke nilai terakhir $ toggle.
- Dengan membuat dan menjalankan fungsi baru seperti yang ditunjukkan dalam cuplikan.
Dijelaskan lebih baik dalam pertanyaan ini .
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
$(`button[toggle]`).each((_, button) => { let $toggle = $(button); type = $toggle.attr("type");
value = $toggle.attr("value"); $toggle.on("click", ((type, value) => {
return () => {
console.log(type, value);
};
})(type, value));
});
});
</script>
</head>
<body>
<div>
<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>
</div>
</body>
</html>