在每个消息的聊天框中更改div的背景颜色

Question

我有一个共同的聊天室，所有用户都可以输入消息，其他人也可以看到这些消息。我有一种情况可以说我在聊天框中输入一条消息，然后div的bg颜色变为红色，下一条消息变为白色。此外，如果任何其他用户在公共聊天框中发送任何消息，并且让div的最后一个bg颜色为白色，那么它应该变为红色。简而言之，我需要使用该公共聊天框中的任何用户发送的每条消息来更改div的bg颜色。结果应该类似于附加的屏幕截图。这可以通过时间戳来实现吗？如果是的话怎么样？

这是我用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：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;