javascript - 每条消息更改聊天框中 div 的背景颜色

Question

我有一个公共(public)聊天室，所有用户都可以在其中输入消息，并且其他人也可以看到这些消息。我有一种情况，假设我在聊天框中输入一条消息，然后 div 的背景颜色更改为红色，而下一条消息则更改为白色。另外，如果任何其他用户在公共(public)聊天框中发送任何消息，并且假设 div 的最后一个背景颜色是白色，那么它应该对所有人来说都是红色的。简而言之，我需要根据公共(public)聊天框中任何用户发送的每条消息来更改 div 的背景颜色。结果应该类似于所附的屏幕截图。这可以借助时间戳来实现吗？如果是的话怎么办？

这是我通过 jQuery 更新的简单 HTML div:

<div id="wrapper">
            <div class="bubble-container" ></div>
</div>

这是我的样式表 CSS:

.bubble-container
{
    display: none;
    width: 100%;
    height: 50px;
}

.bubble
{
    display: inline-block;
    position: relative;
    clear: both;
    background-color: #ffffff;
    width: 100%;
}


.bubble-text
{
    height: 50px;
    display:table;
    margin-left: 10px;
}

.bubble-text p
{
    display: table-cell; 
    vertical-align: middle; 
    font-size:16px;
    margin-left: 10px;
}

用户输入并显示在 UI 上的消息的 JQuery 代码。我正在使用 websockets 来制作这个聊天应用程序。

该函数的逻辑工作正常。但我认为您感兴趣的部分是我设计 div 的方式。截至目前，对于每条消息，此代码都有一个白色的 bg div。但我需要改变它。

function onMessage(evt) {
    var msgText = evt.data;
    var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>' + msgText + '</p></div></div>');
    var bubbles = 1;
    var maxBubbles = 8;
    var server;
    //var bubble = text;
    $("#msgText").val("");

    $(".bubble-container:last")
        .after(bubble);

    if (bubbles >= maxBubbles) {
        var first = $(".bubble-container:first")
            .remove();
        bubbles--;
    }

    bubbles++;
    $('.bubble-container').show(250, function showNext() {
        if (!($(this).is(":visible"))) {
            bubbles++;
        }

        $(this).next(".bubble-container")
            .show(250, showNext);

        $("#wrapper").scrollTop(9999999);
    });

}

Answer 1

使用CSS:

.bubble-container:nth-child(even) {
  background: red;
}

<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#1</p></div></div>
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#2</p></div></div>
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#3</p></div></div>
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#4</p></div></div>
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#5</p></div></div>
<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>msg#6</p></div></div>