Question

我想用两个按钮修改这个code，如果我点击第一个按钮，消息应该显示为红色，如果我点击第二个按钮，它应该显示绿色消息。我希望在延迟的同一个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);
        });
    });
  }
}

谢谢

Answer 1

尝试检查THIS是否符合您的要求

＆＃13;

var msgQueue = [];
//var timeout;

function addMessage(color){
		msgQueue.push({message: "Message number " + (i + 1), color: color});
    showAlertBarMessages();
    i++;
}
var i = 0;

function showAlertBarMessages() {
    var msg = msgQueue[0];
    if (!$('#msg-sequentially').find(':visible').length) {
         var el = $('<div />').html(msg.message).addClass('msg ' + msg.color).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();
            });
        });
    }
}

＆＃13;

.msg {
    display:none;
    padding:20px;
}
.blue{
  background: #00abff;
}
.red{
  background: #F00000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg-sequentially"></div>
<button id="add-msg" onclick="addMessage('red')">Add red message</button>
<button id="add-msg" onclick="addMessage('blue')">Add blue message</button>

＆＃13;

编辑：我用一个对象数组编辑了你的队列，其中包含每条消息和相对颜色

msgQueue.push({message: "Message number " + (i + 1), color: color});

Answer 2

您可以尝试使用属性data存储所需的颜色，然后将包含消息文本和颜色的新对象推送到msgQueue数组。

var msgQueue = [];
//var timeout;

var i = 0;
$('.add-msg').click(function () {
    msgQueue.push({"message":"Message number " + (i + 1),"color":$(this).data("color")});
    showAlertBarMessages();
    i++;
});

function showAlertBarMessages() {
    var msg = msgQueue[0].message;
    var color=msgQueue[0].color;
    if (!$('#msg-sequentially').find(':visible').length) {
        var el = $('<div />').html(msg).addClass('msg').appendTo('#msg-sequentially');
        el.css("background-color",color);
        el.fadeIn(500).promise().done(function () {
            $(this).delay(2000).fadeOut().promise().done(function () {
                $(this).remove();
                msgQueue.splice(0,1);
                if(msgQueue.length) showAlertBarMessages();
            });
        });
    }
}

.msg {
    display:none;
    padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="msg-sequentially"></div>
<button class="add-msg" data-color="red">Add next message red</button>
<button class="add-msg" data-color="green">Add next message green</button>

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

2 个答案: