- Katılım
- 11 Mar 2018
- Mesajlar
- 174
- Tepkime puanı
- 0
- Puanları
- 0
Yapmak istediğim, li'lerde bulunan id değerlerinden (status-online,status-away,status-busy,status-offline) hangisi için seçim yapıldıysa, seçim yapan kullanıcının veritabanında bulunan durum sütununa anlık olarak güncellemek ve veritabanında güncellenmiş durum kısmını anlık olarak yansıtmak. Php kısmında sıkıntı yok ajax, jquery çok az biliyorum.
Örnekte oturum açmış kullanıcının id'sini $K['k_id'] şeklinde alıyorum.
Bunu nasıl yapabilirim?
Örnekte oturum açmış kullanıcının id'sini $K['k_id'] şeklinde alıyorum.
Bunu nasıl yapabilirim?
Kod:
<img id="profile-img" src="http://emilcarlsson.se/assets/mikeross.png" class="<?=$K['k_durum']?>" alt="" />
<p class="capitalize"><?=$K['k_adi']?></p>
<i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
<div id="status-options">
<ul>
<li id="status-online" class="active"><span class="status-circle"></span> <p>Çevrimiçi</p></li>
<li id="status-away"><span class="status-circle"></span> <p>Uzakta</p></li>
<li id="status-busy"><span class="status-circle"></span> <p>Meşgul</p></li>
<li id="status-offline"><span class="status-circle"></span> <p>Çevrimdışı</p></li>
</ul>
</div>
Kod:
$("#profile-img").click(function() {
$("#status-options").toggleClass("active");
});
$(".expand-button").click(function() {
$("#profile").toggleClass("expanded");
$("#contacts").toggleClass("expanded");
});
$("#status-options ul li").click(function() {
$("#profile-img").removeClass();
$("#status-online").removeClass("active");
$("#status-away").removeClass("active");
$("#status-busy").removeClass("active");
$("#status-offline").removeClass("active");
$(this).addClass("active");
if($("#status-online").hasClass("active")) {
$("#profile-img").addClass("online");
} else if ($("#status-away").hasClass("active")) {
$("#profile-img").addClass("away");
} else if ($("#status-busy").hasClass("active")) {
$("#profile-img").addClass("busy");
} else if ($("#status-offline").hasClass("active")) {
$("#profile-img").addClass("offline");
} else {
$("#profile-img").removeClass();
};
$("#status-options").removeClass("active");
});