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

即使文档中没有if ($( "li:odd" ))元素，语句li始终为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>

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

2 个答案: