Web sayfalarında front end işlemlerde yapılacak bazı işlemlerde, bir HTML elementinin bir sınıfa sahip olmasına ya da olmamasına bağlı olarak işlemler yapmak gerekebilir. Örneğin bir toggle butonunda bir yazının rengini sırasıyla yeşil ve kırmızı yapan bir örnekte elementin hangi sınıfa sahip olduğu sorgulanarak bu işlem yapılabilir.
JQuery ile bir HTML element'inin bir class'a sahip olup olmadığını tespit edebilmek için hasClass() metodu kullanılır. JQuery hasClass metodunun örnek bir kullanımını aşağıdaki gibi hazırladım.
HTML:
<p id="yazi" class="kirmizi">
Merhaba
</p>
<a class="renkdegistir">Değiştir</a>
CSS:
.kirmizi{color:red}
.yesil{color:green}
JS:
$(".renkdegistir").click(function(){
if ($("#yazi").hasClass("kirmizi"))
{
$("#yazi").addClass("yesil");
$("#yazi").removeClass("kirmizi");
}
else
{
$("#yazi").addClass("kirmizi");
$("#yazi").removeClass("yesil");
}
});
Editör editi: bazı ilgili başlıklar için;
bkz: JQuery ile hangi radiobutton seçili nasıl anlarım?
bkz: JQuery ile Html tabloya satır eklemek
bkz: JQuery DataTables tarih sütununa göre sıralama yapmak
bkz: JQuery ile tüm checkbox'ların seçilmesi nasıl yapılır?
bkz: JQuery ile Dropdown'da (Select) seçili değeri bulmak
bkz: JQuery ile telefon numarası input masking yapmak