v2.5.2
Giriş yap

jQuery Bağımlılığından Kurtulma

melihozdemir
230 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 1

Merhabalar,
jQuery bağılılığından kurtulmaya çalışıyorum. Aşağıdaki kodda yaptığım li de bununan swipe-to attr göre swiper'ı slide ettirmek. Ama javascript'de attr kodu daha farklı çalışıyor sadece 1 tanesinin idsini alabiliyorum. Aynı divdeki idleri alamıyorum.

jQuery Kodum;

    $(".product-swiper .swiper-trigger-cap li").hover(function(e){
  let swipeToId = $(this).attr('swipe-to');
  console.log(`Clicked: ${swipeToId}`);
  productSwiper.slideTo(swipeToId);
});

Javascript Kodum;

    const productCardH = document.querySelector('.CardProduct .swiper-trigger-cap li');

productCardH.addEventListener('mouseover', function (event) {
    const swipeToId = productCardH.hasAttribute('swipe-cols');
    alert(swipeToId)
});

Şimdiden teşekkür ederim

javascript
Cevap yaz
Cevaplar (1)
ebykdrms
689 gün önce

Evet. JQuery işleri bayağı kolaylaştırıyor. Aynı işlemi yapmak için biraz taklalar atmak gerekiyor.
Öncelikle elementi doğru şekilde seçebiliyorsunuz ve farenin üzerinde dolaşması olayını da doğru şekilde ekliyorsunuz.
Öncelikle $(this) diyerek elementimizi elde ettiğimiz gibi bu elementi nasıl seçebiliriz?

const productCardH = document.querySelector('.CardProduct .swiper-trigger-cap li');
productCardH.addEventListener('mouseover', function (event) {
    const swipeToId = event.target; // event, olayla ilgili verileri verir. event.target ise olayın gerçekleştiği elementi verir.
});

Böylece swipeToId değişkenine olayın gerçeştiği elementi atayabildik.. mi acaba? Aslında evet ama tam olarak değil.
Olay, imleç tam olarak hangi elementin üzerinde dolaşıyorsa target ile onu veriyor. Yani sizin <li> elementinizin içinde bir <a> elementi varsa ve fare orada dolanıyorsa siz li'yi değil a'yı elde etmiş oluyorsunuz.

Peki doğrudan li elementimizi nasıl seçeceğiz? 2 yol var. Biri this, diğeri de event.target.closest("li").
closest() fonksiyonu, parametre olarak verilen seçiciye ulaşana kadar elementin parent'larına bakar ve bulduğu ilk elementi verir.
Tabii ki biz en kolay ve performanslı yol olan this anahtarını doğrudan kullanabiliriz.

const productCardH = document.querySelector('.CardProduct .swiper-trigger-cap li');
productCardH.addEventListener('mouseover', function (event) {
    const swipeToId = this; // mouseover olayının gerçekleştiği elementi aldık.
});

Amacımız bu elementte var olduğunu bildiğimiz swipe-to attribute'sine ulaşmak. Sizin kullandığınız hasAttribute() fonksiyonu attribute'nin değerini vermez, sadece böyle bir attribute var mı yok mu diye bakar ve duruma göre true|false döner.
Peki biz bu attribute'nin değerine nasıl ulaşabiliriz? Burada da yardımımıza elementin getAttribute() fonksiyonu koşuyor.

const productCardH = document.querySelector('.CardProduct .swiper-trigger-cap li');
productCardH.addEventListener('mouseover', function (event) {
    const swipeToId = this.getAttribute("swipe-to"); // mouseover olayının gerçekleştiği elementin swipe-to attribute'sinin değerini aldık.
    if(!swipeToId) { console.error("mouseover event'inin gerçekleştiği elementin 'swipe-to' adlı bir attibute'si yok."); return; } // Böyle bir attribute yoksa error verelim ve return ile fonksiyonu durduralım.
    console.log({swipeToId}); // Aldığımız attribute değerini konsola yazdırıp görebiliriz.
});

Elementlerin getAttribute() fonksiyonları, parametre olarak verilen değerle aynı adda bir attribute var mı diye bakar ve değerini verir. Eğer böyle bir attribute yoksa null verir. Böylece istersek aldığımız değerin null olup olmadığına dair bir if kontrolü yapabiliriz.

0
#010327