给每个后续聊天消息一个交替的类，但所有消息都得到相同的类

Question

我有一个简单的节点JS聊天应用程序。我在前端使用express、mongodb、socket.io和jQuery。

一切正常，但我希望其他每条消息都有不同的颜色和对齐方式。

这些是CSS类：

.blueText {
text-align:left;
color: #00F;
}
.greenText {
text-align:right;
color: #0F0;
}

这是相关的JS函数：

socket.on('message', addMessages)
function addMessages(message){
if ($( "li:odd" )) {
$("#messages").append(`<li class='blueText'> ${message.name} </li> <p> 
${message.message} </p> <span> ${message.id} </span>`)
}
else {
$("#messages").append(`<li class='greenText'> ${message.name} </li> <p> 
${message.message} </p> <span> ${message.id} </span>`)
}}

结果是，所有的消息都得到了blueText类。

另一件事是，我如何才能为每个用户获得一种独特的颜色。

Answer 1

即使文档中没有li元素，语句if ($( "li:odd" ))也始终为true。$('yourselector')总是返回一个对象，即使您搜索的元素在文档中不存在(只需在浏览器控制台中的console.log($('nonexistingelement'))即可查看返回的对象(

然后，如果我理解的话，你想要一个不同于当前用户的颜色和对齐方式。所以这个片段应该是这样的：

socket.on('message', addMessage)
function addMessage(message){
const messageClass = message.user === currentUser ? 'blueText' : 'greenText' 
// REPLACE TERNARY STATEMENT WITH YOURS, MATCHING YOUR DATA STRUCTURE
$("#messages").append(`<li class="${messageClass}"> ${message.name} </li> <p> 
${message.message} </p> <span> ${message.id} </span>`)
}

Answer 2

您不需要任何JavaScript或JQuery就可以让组中的其他元素使用不同的CSS样式。只需使用CSS:nth-child()选择器：

li:nth-child(odd){
color:red;
}
li:nth-child(even){
color:blue;
}

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>  
</ul>

而且，因为您可能不想根据奇数/偶数进行切换，而是希望根据显示的用户消息进行切换。只需确保为li分配一个类，该类将其指定给哪个用户，然后您只需要一个稍微不同的CSS选择器：

li.user1{
color:red;
}
li.user2{
color:blue;
}

<ul>
<li class="user1">Item</li>
<li class="user1">Item</li>
<li class="user2">Item</li>
<li class="user1">Item</li>
<li class="user2">Item</li>
<li class="user2">Item</li>  
</ul>