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
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