name ve class bölümlerini doğru şekilde eklemişsiniz.
value ekleme işini label'i clone'ladığımız yerde yapabiliriz.
$item.find("span").text(sehir.ilceleri[i]); satırının hemen altına
$item.find("input[type=checkbox]").val(sehir.ilceleri[i]); satırını ekleyebilirsiniz.
codepen.io pen'ini de düzenledim.
Direkt çalışmasını istiyorsan da aynı yöntemi kullanabilirsin. Mesela:
<div class="ekleyen">
İlanı Kim Ekledi ?:
<div id="ekleyen">...</div>
<script>
function ekleyenn(parametre1, parametre2, parametre3) {
const element = document.getElementById("ekleyen");
// Bu elemente ulaştıktan sonra üzerinde istediğin manipülasyonu yapabilirsin.
// Mesela biz ilk parametreyi ve diğer 2 parametrenin toplamını elementin içine yazalım:
element.innerHTML = parametre1 + ": " + (Number(parametre2) + Number(parametre3));
}
ekleyenn("Ekleyen Adı",10, 20);
</script>
</div>
Anladığımdan emin değilim ama siz, element oluştuğu zaman onclick olmasına gerek kalmadan bir js fonkisyonu çalışsın istiyorsunuz sanırım.
Elementiniz şunlardan biri olsaydı:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
o zaman onload olayını tıpkı onclick olayını kullandığınız gibi kullanabilirdiniz.
<sup>Kaynak</sup>
Ama siz <div>'in oluşmasınan hemen sonra bir js fonksiyonu çalışsın istiyorsanız <div>'inizin hemen peşine <script> ekleyebilirsiniz.
<script>i eklediğiniz sırada div#ekleyen elementiniz DOM'a eklenmiş olacağı için ona doğrudan erişip işlem yapabilirsiniz.
Örneğin:
<div class="ekleyen">
İlanı Kim Ekledi ?:
<div id="ekleyen">...</div>
<script>
document.getElementById("ekleyen").innerHTML = "Ekleyen Adı";
</script>
</div>
Sorunlarına çözüm bulunca Doğru Cevap olarak işaretlemeyi pek tercih etmeyen @ilkertuncer adlı kullanıcıya vaktiyle verdiğim PHPMailer Örneği cevabıma göz atabilirsiniz.
Bu cevabımda bir sorun var mıydı? Bilmiyorum. Çünkü yaşadığı sorunun çözümünü cevap olarak yazmak ve doğru cevabı işaretlemek yerine aynı başlık altında bana başka soru sormayı tercih etmişti.
Ara sıra siz de doğru cevap işaretlemeyi atlamışsınız.
Mesela buradaki veya buradaki sorularınızda doğru cevap belli değil. Siz çözmüşseniz de nasıl çözdüğünüzü yazmamışsınız.
Bakın örneğin burada size cevap veren 3 kişiye teşekkür edip sorunu farklı bir yolla çözdüğünüzü belirtmişsiniz ama nasıl çözdüğünüzü de yazıp doğru cevap olarak işaretlemediğiniz için Çözülmemiş Soru olarak kalmış.
Buradaysa nasıl çözdüğünüzü teorik olarak yazmışsınız ve cevap yazanlara teşekkür etmişsiniz ama soru halen çözülmeyi bekleyen sorular arasında...
Buradaysa cevabımın kopyala yapıştırla uğraştırması nedeniyle başka bir plaftorm üzerinden cevabı oluşturmamı istemişsiniz ve güzel bir düşünce olduğunu düşünerek istediğiniz şekilde yanıt vermişim. Hatta bu cevaptan sonra başkalarının sorularında da önerdiğiniz yöntemi kullandım. Ama ne yazık ki size verdiğim cevabın doğru olup olmadığı yine Çözülmemiş Soru olarak kalmış.
Hadi mesela burada ise kapsamı çok geniş bir soru sormuşsunuz ve cevaplarımız sizi tatmin etmemiş olabilir. Bu soruya daha geniş kapsamlı bir cevap bekliyor olabilirsiniz ki bu iyi de olur çünkü bunu sizin gibi merak eden başkaları da konuyla ilgili daha derinlemesine bilgiye sahip olmak isteyeceklerdir. Ama bu durumda da doğru cevabı halen almadığınızı düşünüyorsanız nasıl bir cevap istediğinize dair bir cevap yazarak konunun ilerlemesini sağlamalı ve sonuca ulaşıncaya kadar devam etmelisiniz. Yoksa bu soru yıllarca çözülmemiş kalır.
Oysaki burada, burada ve burada sorunuza doğru cevap bulduğunuzda işaretlemişsiniz ve bu platformu olması gerektiği gibi kullanmışsınız.
Bunlar sadece benim size cevap verdiğim sorular. Böyle bir bakınca bugüne kadar sizin 9 sorunuza dahil olmuşum ve bu soruların sadece 3'ünde doğru cevabı bulduğunuzu belirtmişsiniz. Eğer benim cevap vermediğim sorularınızda da bunu yapıyorsanız sorularınızın 2/3'ü cevaplandığı halde çözülmemiş soru olarak kalıyor.
Bu yalnız sizin yaptığınız bi'şey değil tabi. Muhtemelen sorununuzu çözdükten sonra buraya geri dönüp doğru cevap işaretlemeyi unutuyorsunuzdur veya aklınıza geldiğinde de vaktiniz olmuyordur -ki zaten bu platformu sık kullanıyorsunuz ve sıklıkla yeni sorunlarla ilgileniyorsunuz- ve haliyle hızlıca ileri gitmekten geriyi toplamaya fırsatınız olmuyor.
Benim buna takılma nedenim; bu platformun amacına uygun kullanılmadığını düşünmem.
Normalde bu platformun birçok eksiği var.
Profilimiz yeterince detaylı değil ve düzenlenemiyor. Sorularda ara özelliği yeterince fazla sonuç göstermiyor.
Cevaplarda kişi etiketleme yok.
Sizin soru olarak açtığınız Acilen mesaj reportlama gelmesi lazım! başlıklı talebiniz var mesela.
Tabii ki Tayfun ERBİLEN bunların hepsini yapabilir. Hatta yanılmıyorsam uzmancevap.org projesinde bunlardan da fazlasını düşündüğünü (pazar yeri gibi) göstermişti. Ama bu onun gönüllülük esasına göre geliştirdiği bir proje ve platformunun onun hayal ettiği gibi kullanılmadığını gördünce gönüllüğünü yitiriyor. Hatta sanırım Gökhan KANDEMİR ile yaptığı, YouTube'dan izlediğim bir yayında bu rahatsızlığını dile getirmişti.
Şu an bu projeyi eksiklerini de gidererek başka bir domain altında ben de yapabilirim. Ama benim de Tayfun ERBİLEN kadar geniş bir kitleye projemi ulaştırmam mümkün olmaz. Elimizde binlerce yazılımcıyı tek çatı altında toplayabilecek etkiye sahip bir adam var ve üşenmeyip bize bu platformu kurmuş ama biz onu düzgün kullanıp geliştirmek yerine veri çöplüğüne çeviriyoruz. Eminim şu an bu platformda da Tayfun ERBİLEN özellikle engellemese (uzmancevap.org'da olduğu gibi) sorusuna çözüm bulunca soruyu tüm cevaplarıyla birlikte silmeye çalışacak saygısız, bencil kullanıcılar vardır.
İç Dökme Sonrası Cevap
@ilkertuncer adlı kullanıcıya vaktiyle verdiğim PHPMailer Örneği cevabıma göz atabilirsiniz.
Belki soru orada başladı ama burada sonlanır. Bu örnek bende çalışıyor. Sizde çalışmazsa ne hatayla karşılaştığınızı yazarsanız yardımcı olabiliriz.
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.
<html>
<head>
<title>Hey</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Header</header>
<main>
<aside>Menü</aside>
<section>içerik</section>
</main>
</body>
</html>
* { margin:0; padding:0; box-sizing:0 }
html,body { height:100%; }
body { display:flex; flex-direction:column; }
body > header { display:flex; flex-direction:row; width:100%; height:60px; }
body > main { display:flex; flex-direction:row; flex:1; }
body > main > aside { width:250px; height:100%; }
body > main > section { flex:1; height:100%; overflow-y:scroll; }
JSFiddle üzerindeki kodunuzun çalışmamasının nedeni, input'a veri girişi yapıldığını dinleyen bir olay oluşturmamış olmanız.
Siz sadece sayfa ilk oluşturulduğu andaki değeri alıyor, ona göre işlem yapıyorsunuz. Sonraki değişimleri dinlemiyorsunuz.
Şu düzenleme işe yarayacaktır:
$button_genelBilgiler = $("#genelBilgiler");
$input_adSoyad = $("[name=adSoyad]");
$input_adSoyad.on("input", function() {
const val = $(this).val();
if(val.trim()) $input_adSoyad.css({'opacity' : '1', 'pointer-events' : 'initial' });
else $input_adSoyad.css({'opacity' : '.7', 'pointer-events' : 'none' });
});
Merhaba. Siz verileri asenkron bir yapıda çekiyorsunuz. Doğrudan useState() içine yazdırıyorsanız aslında henüz veri gelmemişken state'in ilk değerini atıyorsunuz muhtemelen. State'e varsayılan olarak boş değer vermeli ve veritabanından gelen verileri useEffect altında bir promise yapısı içinde çağırmalısınız. Örneğin:
const MyComponent = () {
const [datasState, setDatasState] = useState(null);
useEffect(()=>{
new Promise(async (resolve,reject) => {
datas = await getMyData(); // bu fonksiyon ile veritabanınızdan verileri çekiyorsunuz diyelim...
if(datas) setDatasState(datas);
}).catch(()=>{ alert("hata var!!!"); });
},[]);
// datasState değerinin değişimlerini console'dan izleyelim
useEffect(()=>{
console.log("datasState", datasState);
},[datasState]);
return (
<div>
{ datasState
? <MyOtherComponent datas={datasState} />
: <div>Veriler yükleniyor...</div>
}
</div>
);
};