v2.5.2
Giriş yap

Sohbet baloncuğu

swatalk
533 defa görüntülendi ve 2 kişi tarafından değerlendirildi

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

Cevap yaz
Cevaplar (4)
tayfunerbilen
1288 gün önce

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

swatalk
1288 gün önce

Ç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>
rephp7
1288 gün önce

Rica etsem, istediğini başardığında kodları paylaşır mısın?

themonster
1288 gün önce

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"> ...');