我如何在JQuery中追加两个类 [英] How can i append two classes in JQuery
本文介绍了我如何在JQuery中追加两个类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用django实现了聊天框消息（实时聊天），现在我想添加css，但是我对如何在已发送的信息上附加多个类有疑问。例如，我想显示其他用户消息向左浮动，而当前用户消息向右浮动。但是，当我提交消息时，仅在浮动右边显示，因为我仅将一个类附加到已发送的消息中。我认为这是因为当我更改class = message-list me时，我仅附加class = message-list me。这将所有消息显示在左侧。我该如何向左右浮动每个消息？
I have implemented a chat box message (live chat) using django and now i want to add css, but i have problem on how to append multiple classes on messege sent. For example, i want to show other user messages float left and current user messages float right. But when i submit messages is displays only on float right, because i am only appending one class to messege sent. I think this is because i am only appending class="message-list me", when i change class="message-list" this display all message to the left. How do i float each message to left and right?
我得到的是：
哈哈应该向右浮动（flex-start），而pepe应该向左浮动（ flex-end）。
This is what i got: haha should float to right (flex-start), while pepe should float to left (flex-end).
警告（e.data）
我想要这样的东西：
consumers.py
consumers.py
class ChatConsumer(AsyncConsumer):
async def websocket_connect(self, event):
print('connected', event)
other_user = self.scope['url_route']['kwargs']['username']
me = self.scope['user']
thread_obj = await self.get_thread(me, other_user)
self.thread_obj = thread_obj
chat_room = f"thread_{thread_obj.id}"
self.chat_room = chat_room
await self.channel_layer.group_add(
chat_room,
self.channel_name
)
await self.send({
"type": "websocket.accept"
})
async def websocket_receive(self, event):
# when a message is recieved from the websocket
print("receive", event)
front_text = event.get('text', None)
if front_text is not None:
loaded_dict_data = json.loads(front_text)
msg = loaded_dict_data.get('message')
user = self.scope['user']
username = 'default'
if user.is_authenticated:
username = user.username
myResponse = {
'message': msg,
'username': username
}
await self.create_chat_message(user, msg)
# broadcasts the message event to be sent, the group send layer
# triggers the chat_message function for all of the group (chat_room)
await self.channel_layer.group_send(
self.chat_room,
{
"type": "chat_message",
"text": json.dumps(myResponse)
}
)
# chat_method is a custom method name that we made
async def chat_message(self, event):
#sends the actual message
await self.send({
"type": "websocket.send",
"text": event['text']
})
async def websocket_disconnect(self, event):
# when the socket disconnects
print('disconnected', event)
@database_sync_to_async
def get_thread(self, user, other_username):
return Thread.objects.get_or_new(user, other_username)[0]
@database_sync_to_async
def create_chat_message(self, me, msg):
thread_obj = self.thread_obj
return ChatMessage.objects.create(thread=thread_obj, user=me, message=msg)
模板：
<div class="message-wrap" id='chat-items'>
{% for chat in object.chatmessage_set.all %}
<div class="message-list">
{% if request.user != chat.user %}
<div class="msg">
<p>
{{ chat.message }}
</p>
</div>
<div class="time">{{ chat.timestamp }}</div>
{% endif %}
</div>
<div class="message-list me">
{% if request.user == chat.user %}
<div class="msg">
<p>
{{ chat.message }}
</p>
</div>
<div class="time">{{ chat.timestamp }}</div>
{% endif %}
</div>
{% endfor %}
</div>
<h3>Thread for {% if user != object.first %}{{ object.first }}{% else %}{{ object.second }}{% endif %}</h3>
<ul id='chat-items'>
{% for chat in object.chatmessage_set.all %}
<li>{{ chat.message }} via {{ chat.user }}</li>
{% endfor %}
</ul>
<form id='form' method='POST'> {% csrf_token %}
<input type="hidden" id="myUsername" value="{{ user.username }}" />
{{form.as_p }}
<input type='submit' class='btn btn-primary'/>
</form>
CSS：
.message-wrap .message-list {
align-self: flex-start; #float start
max-width: 70%;
}
.message-wrap .message-list.me {
align-self: flex-end; #float at the end
}
.message-wrap .message-list.me .msg {
background: #bde2f7;
color: #111;
}
.message-wrap .message-list .msg {
background: #fff;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
padding: 10px 5px;
margin-bottom: 10px;
border-radius: 5px;
}
JQuery：
<!-- Channels Reconnecting Websocket -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.js'></script>
<script>
// websocket scripts - client side*
var loc = window.location
var formData = $("#form")
var msgInput = $("#id_message")
var chatHolder = $('#chat-items')
var me = $('#myUsername').val()
var wsStart = 'ws://'
if (loc.protocol == 'https:') {
wsStart = 'wss://'
}
var endpoint = wsStart + loc.host + loc.pathname
var socket = new ReconnectingWebSocket(endpoint)
// below is the message I am receiving
socket.onmessage = function(e) {
console.log("message", e)
var chatDataMsg = JSON.parse(e.data)
chatHolder.append("<div class='message-list me'>" + "<div class='msg'>" + "<p>" + chatDataMsg.message + "</p>" + "</div>" + "</div>")
}
// below is the message I am sending
socket.onopen = function(e) {
console.log("open", e)
formData.submit(function(event){
event.preventDefault()
var msgText = msgInput.val()
//chatHolder.append("<li>" + msgText + " via " + me + "</li>")
var finalData = {
'message': msgText
}
socket.send(JSON.stringify(finalData))
formData[0].reset()
})
}
socket.onerror = function(e) {
console.log("error", e)
}
socket.onclose = function(e) {
console.log("close", e)
}
</script>
推荐答案
这就是我通过以下方法使其工作的方式
This is how i got it working, by getting the value of logged user and other user.
socket.onmessage = function(e) {
console.log("message", e)
var chatDataMsg = JSON.parse(e.data)
//here `me` = $('#myUsername').val() which you alraedy getting in code
if(chatDataMsg.username == me ){
chatHolder.append("<div class='message-list me'>" + <div class='msg'>" + "<p>" + chatDataMsg.message + "</p>" + "</div>" + "</div>") }
else{
chatHolder.append("<div class='message-list '>" + "<div class='msg'>" + "<p>" + chatDataMsg.message + "</p>" + "</div>" + "</div>")
}
}
这篇关于我如何在JQuery中追加两个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
