Каждому последующему сообщению чата присваивается альтернативный класс, но все сообщения получают один класс.

Question

У меня есть простое приложение JS Chat.Я использую 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

Вам не нужен 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>

Answer 2

Выражение if ($( "li:odd" )) всегда верно, даже если в вашем документе нет элемента li.$('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>`)
}