Javascript 在同一div中显示具有不同颜色且延迟的消息？

我想用两个按钮来修改它，如果我点击第一个按钮，消息应该显示为红色，如果我点击第二个按钮，消息应该显示为绿色。我想在同一个节目中延迟播放

function showAlertBarMessages(type) {
  var msg = msgQueue[0];
  if (!$('#msg-sequentially').find(':visible').length) {
     var el = $('<div />').html(msg).addClass('msg').appendTo('#msg-sequentially');
    el.fadeIn(500).promise().done(function () {
        $(this).delay(2000).fadeOut().promise().done(function () {
            $(this).remove();
            msgQueue.splice(0,1);
            if(msgQueue.length) showAlertBarMessages(type);
        });
    });
  }
}

函数showAlertBarMessages（类型）{
var msg=msgQueue[0]；
if（！$（'#msg sequencely'）.find（':visible'）.length）{
var el=$（''）.html（msg）.addClass（'msg'）.appendTo（'msg顺序'）；
el.fadeIn（500）.promise（）.done（函数（）{
$（this）.delay（2000）.fadeOut（）.promise（）.done（函数（）{
$（this.remove（）；
msgQueue.拼接（0,1）；
if（msgQueue.length）showAlertBarMessages（类型）；
});
});
}
}

谢谢

试着检查一下这是否是你想要的

var msgQueue=[]；
//var超时；
函数addMessage（颜色）{
push（{message:“messagenumber”+（i+1），color:color}）；
showAlertBarMessages（）；
i++；
}
var i=0；
函数showAlertBarMessages（）{
var msg=msgQueue[0]；
if（！$（'#msg sequencely'）.find（':visible'）.length）{
var el=$（''）.html（msg.message.addClass（'msg'+msg.color）.appendTo（'#msg sequencely'）；
el.fadeIn（500）.promise（）.done（函数（）{
$（this）.delay（2000）.fadeOut（）.promise（）.done（函数（）{
$（this.remove（）；
msgQueue.拼接（0,1）；
if（msgQueue.length）showAlertBarMessages（）；
});
});
}
}

.msg{
显示：无；
填充：20px；
}
蓝先生{
背景：#00abff；
}
瑞德先生{
背景：#F00000；
}

添加红色消息
添加蓝色消息

您可以尝试使用属性

数据

存储所需的颜色，然后将包含消息文本和颜色的新对象推送到

msgQueue

数组中

var msgQueue=[]；
//var超时；
var i=0；
$（'.add msg'）。单击（函数（）{
msgQueue.push（{“message”：“messagenumber”+（i+1），“color”：$（this.data（“color”）}）；
showAlertBarMessages（）；
i++；
});
函数showAlertBarMessages（）{
var msg=msgQueue[0]。消息；
var color=msgQueue[0]。颜色；
if（！$（'#msg sequencely'）.find（':visible'）.length）{
var el=$（''）.html（msg）.addClass（'msg'）.appendTo（'msg顺序'）；
el.css（“背景色”，颜色）；
el.fadeIn（500）.promise（）.done（函数（）{
$（this）.delay（2000）.fadeOut（）.promise（）.done（函数（）{
$（this.remove（）；
msgQueue.拼接（0,1）；
if（msgQueue.length）showAlertBarMessages（）；
});
});
}
}

.msg{
显示：无；
填充：20px；
}

添加下一条红色消息
添加下一条绿色消息

更详细地说明您的需要。如果我在消息仍显示时单击按钮，则下一条消息不会显示任何颜色。是的，它解决了我的问题。非常感谢您能为我的新问题提供解决方案吗？假设我有一个第三按钮，当我按下按钮时，它应该显示在同一DIV中删除其他两个按钮产生的消息……你应该考虑一个新的问题，因为原来的一个已经实现了。这是我新问题的链接。