Merhaba arkadaşlar bu yazımda sizlere kısaca jQuery kullanarak bir css sınıfındaki öğelerden yalnızca birini nasıl seçebileceğimizi anlatmaya çalışacağım. Bildiğiniz gibi eğer kullanmak istediğimiz öğeye özgü bir stil oluşturmak ya da yalnızca o öğeyle ilgili işlemler yapmak istiyorsa id kullanmak daha mantıklı bir yoldur, ancak bazı durumlarda sınıf olarak belirtilmiş bir öğe üzerinde de işlem yapmamız gerekebilir. Bunu nasıl yapabileceğimizi aşağıdaki kodla anlatmaya başlıyorum.
Öncelikle boş bir HTML sayfası oluşturup en başına da aşağıdaki css kodlarını yazalım
<style type="text/css">
body,td,th {
color: #000000;
}
body {
background-color: #FFFFFF;
}
.sag {
background-color:#E8E8E8;
}
.sol_baslik {
background-color:#DFE0A9;
}
.sol_baslik:hover {
background-color:#F491DE;
}
</style>
CSS kodumuzda önemli olan iki sınıfımız var. Birinci sag adını verdiğim sınıf ve bunlarla divlerimi oluşturacağım sınıf; ikincisi de sol_baslik sınıfı ki üzerinde işlem yapacağım sınıf. Ayrıca fark ettiğiniz gibi sol_baslik için bir de üzerine fare ile gelince farklı efekt vermek için hover kullandım ancak bu örneğimizin daha pekişmesi için yoksa jQuery de bu hover seçicisine ihtiyacım olmayacak.
Şimdi de bu kodların altına aşağıdaki html kodumuzu ekleyelim
<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>Kodumuzu bu haliyle çalıştırdığımızda ekranda üç adet gri div ve onların içinde de sarımsı bir arkaplan rengine sahip yazılar göreceksiniz. Fare ile bu yazıların üzerine geldiğinizde o yazının arkaplan renginin pempeye döndüğünü göreceksiniz.
Peki biz o yazıların değil de başka bir şeyin mesela örneğimizde olduğu gibi divlerin üzerine geldiğimizde o divin içindeki yazının arkaplan renginin değişmesini isteseydik ne olacaktı? Basit anlatımla sag isimli sınıftaki divin üzerine fare ile gelince sol_baslik sınıfındaki yazının rengini değiştir dememiz gerekiyor ancak böyle bir durumda sol_baslik sınıfındaki bütün öğeler değişecek çünkü sınıfa ait bir özelliğin değişmesi sınıftaki bütün öğeleri değiştirecektir. Bunun için de jQuery kullanarak aşağıdaki kodda olduğu gibi this parametresi ve onun içindekileri seçmemizi sağlayan childeren parametresini kullanıyoruz.
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sag').hover(
function () {
$(this).children(".sol_baslik").css({"background-color":"#900"});
},
function () {
$(this).children(".sol_baslik").css({"background-color":"#3292b8"});
});
});
</script>
Yukarıdaki jQuery kodunda önce jQuery kütüphanesini çağırıyoruz ardından da sayfamız yüklendikten sonra çalışmasını istediğimiz fonksiyonumuzu yazıyoruz. sag isimli sınıftaki bir öğenin üzerine fare ile gelindiğinde this ile o öğeyi seçiyoruz ve childeren ile de öğenin kapsadığı sol_baslik sınıfının (dikkat edin yalnızca üzerine gelinen sag isimli sınıfa sahip öğenin içinde bulunan sol_baslik sınıfını değiştiriyoruz) arkaplan rengini farklı bir renk yapıyoruz. jQuery kütüphanesinin temel yazım tekniğine göre oluşturduğumuz kodda yazdığımız ikinci fonksiyon da fare, ilgili öğenin üzerinden ayrılınca o öğenin farklı bir arkaplan rengini almasını sağlıyor.
En son tüm kodumuz aşağıdaki gibi olacak. Kodu kendiniz deneyerek ne demek istediğimi daha rahat anlayabilirsiniz.
<style type="text/css">
body,td,th {
color: #000000;
}
body {
background-color: #FFFFFF;
}
.sag {
background-color:#E8E8E8;
}
.sol_baslik {
background-color:#DFE0A9;
}
.sol_baslik:hover {
background-color:#F491DE;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sag').hover(
function () {
$(this).children(".sol_baslik").css({"background-color":"#900"});
},
function () {
$(this).children(".sol_baslik").css({"background-color":"#3292b8"});
});
});
</script>
<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>
Burada biz bir divin üzerine geldiğimizde içindeki başka bir sınıfa ait öğenin değişerek aynı sınıftaki diğer öğelerin sabit kalmasını sağladık. Siz isterseniz daha farklı senaryolar deneyebilirsiniz. Örneğin bir düğmeye basıldığında yukarıdaki bir başlığı değiştirmek gibi yani değiştirilecek öğenin mutlaka bir üst elemanın üzerine gelince değişmesi gibi bir şart yok. Değişik bir örnek olarak deneme ismini verdiğimiz bir idye sahip bir divin içeriğiyle ilgili işlem yapabilmek için kodumuzu aşağıdaki gibi değiştirmemiz gerekecekti.
$(this).children(".sol_baslik").css({"background-color":"#900"});
},
Konunun daha iyi anlaşılabilmesi için aşağıdaki video anlatımımdan da yararlanabilirsiniz. Şimdilik hoşçakalın.