Jquery Add / Remove Class Rezervasyon Uygulaması

Web sayfası ilk yüklendiğinde sayfada olmayan nesneleri eklemek için append fonksiyonu kullanılabilir. Append fonksiyonu istenilen elemanın içine (bu eleman içindeki eski nesneleri silmeden) yeni nesneler eklemek için kullanılır.
Örnek : Kutu2 div'inin içinde 5 adet buton sıra ile eklendi. Her yeni eklenen buton bir önceki butonu silmeden yanına gelecek şekilde eklendi.

Sayfaya sonradan eklenen nesnelerde değişiklik yapmak için $(document) ile birlikte on fonksiyonundan faydalanılır. Bu fonksiyon sayfayı tekrar taradığı için yeni eklenen elemanlara ulaşır.
Örneğin sayfaya sonradan eklenen btn-danger class ına sahip butonlara erişmek için on fonksiyonu kullanılmaladır. Kullanımı aşağıdaki gibidir.

$(document).on('mouseover','.btn-danger',function(){ //Bu kısma butona ulaşıldığında çalışacak kodlar gelecektir. $(this).removeClass('btn-danger').addClass('btn-secondary'); });
Alttaki örnekte val() fonksiyonu kullanılarak textbox'ın içine girilen sayı kadar buton yanda bulunan kutu2 div'inin içine eklenmiştir. Bu eklenen butonların class'ı btn-danger dır. Bu butonlara tıklandığında $(document).on() metodu kullanılarak üzerlerine gelindiğinde btn-secondary class'ı eklenir. Butonlara çift tıklatıldığında yine $(document).on() metodu kullanılarak btn-success class'ı eklenmiştir.
Örneği indirerek kodları inceleyebilirsiniz.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın