Jquery .each () kullanarak tek tek olay dinleyicileri nasıl eklenir?
Basit bir kurulumum var: Farklı değerlere sahip iki düğme. Her düğmenin değerlerini kaydeden düğmelerin her birine bir tıklama olay dinleyicisi eklemek için jquery'deki .each () işlevini kullanmak istiyorum. Ancak bir şekilde .each () kullanılırken, jquery önceki düğme (ler) için tıklama işleyicisinin üzerine yazar. Bu beni iki soruyla baş başa bırakıyor:
- Neden?
- Bir jquery nesneleri koleksiyonuna tek tek olay dinleyicileri nasıl eklenir?
Aşağıdaki koda bakın
<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>Yanıtlar
Kodunuzdaki sorun , ve değişkenlerini örtük olarak bildirmeniz , dolayısıyla kapsam içinde olmalarıdır . Bu nedenle, takip eden her yineleme değerlerin üzerine yazar, böylece döngü bittikten sonra yalnızca son değerler görülür.typevaluewindow
Bunu düzeltmek için döngü içindeki değişkenleri tanımlayın :
$(() => { $(`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>Ancak ,each()döngüyehiç ihtiyacınız yok. Aynı olay işleyicisini tümbuttonöğelerebağlayarak vetargetözniteliklerine erişmek için oluşturulan olayın özelliğinikullanaraksorunu çözebilir ve kod kalitesini artırabilirsiniz.
Ayrıca, togglebu durumda kendi standart dışı özniteliklerinizi eklemenin kullanıcı arayüzü ve JS'de sorunlara yol açabileceğini unutmayın. Daha iyi bir yaklaşım, öğeleri gruplamak için bir sınıf kullanmaktır.
Son olarak oneve öznitelik twoiçin geçerli değerler değildir type. dataBir öğeye kendi özel meta verilerinizi eklemek için bunun yerine bir öznitelik kullanın.
Tüm söylenenlerle şunu deneyin:
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>$(this)tıklama geri aramasının içinde kullanın
$(() => {
$(`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>Ayrıca her geri aramada belirtmeye gerek yok. Aşağıdaki gibi normal bir şekilde arayabilirsiniz
$(() => { $(`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>- Çünkü dinleyici $ toggle'ın son değerine bağlanır.
- Parçacıkta gösterildiği gibi yeni bir işlev oluşturup çalıştırarak.
Bu soruda daha iyi açıklanmıştır .
<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>