Sohbet baloncuğu
Herkese merhaba resimdeki gibi sadece son mesajlar da profil foroğrafı göstermek istiyorum bunu php de foreach için de kullanacağım yada jquery $.each() fonksiyonu içinde de olabilir, sohbette sadece 2 kullanıcı var gonderen ve alan. css selectors ve jquery last selector ile denedim ama bütün konuşma içinde son mesajı seçiyor
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
eğer mesajları gruplamadan böyle bir şey yapmak istersen html yapını şöyle düşünelim;
<div class="chat">
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
</div>
<div class="add-chat">
<input type="text" placeholder="Yeni mesaj ekle">
<label>
<input type="checkbox" value="1" name="me">
kendin olarak gönder
</label>
</div>
ufak bir css
.chat {
border: 1px solid #ddd;
padding: 15px;
}
.message {
padding: 10px;
background: #eee;
border-radius: 10px;
margin-bottom: 5px;
}
.message img {
display: none;
}
.message.me {
background: lime;
}
ve jquery tarafın şöyle olabilir
function setImages() {
$('.message img').hide();
$('.message.me + .message:not(.me)').prev('.message.me').find('img').show();
$('.message:not(.me) + .message.me').prev('.message:not(.me)').find('img').show();
$('.message:last').find('img').show();
}
setImages();
$('.add-chat input').on('keyup', function(e) {
if (e.key === 'Enter') {
$('.chat').append(`<div class="message${$(this).closest('.add-chat').find('input[type="checkbox"]').is(':checked') ? ' me' : ''}">
${$(this).val()}
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>`);
$(this).val('');
setImages();
}
});
demoyu görmek istersen: https://codepen.io/tayfunerbilen/pen/BaWGodP
Çok teşekkür ederim aradığım tam da buydu sayenizde sonuca ulaştım. işinizin olmadığı bir gün gruplama örneği ile yapar mısınız acaba
<ul>
<li class="him start">By Other User</li>
<li class="him">By Other User</li>
<li class="him end">By Other User</li>
<li class="me start">By this User, first message</li>
<li class="me">By this User, secondmessage</li>
<li class="me">By this User, third message</li>
<li class="me end">By this User, fourth message</li>
<li class="him start">By Other User</li>
<li class="him">By Other User</li>
<li class="him end">By Other User</li>
<li class="me start">By this User, first message</li>
<li class="me">By this User, secondmessage</li>
<li class="me">By this User, third message</li>
<li class="me end">By this User, fourth message</li>
</ul>
html cıktısını ve js cıktısını atarsanız daha rahat yardım edebiliriz fakat mantık gereği her mesaj attıktan sonra üst mesajlardaki resimleri kaldırıp son resimlere ekletmek gerekiyor
$(".user_img").remove();
$(".user_info:last").html('<img class="user_img"> ...');