在同一個div中顯示具有不同顏色的消息並延遲？

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是你想要的

var msgQueue = []; 
 
//var timeout; 
 

 
function addMessage(color){ 
 
\t \t 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(); 
 
      }); 
 
     }); 
 
    } 
 
}

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

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

編輯同時顯示：我編輯你的用對象數組排隊，包含每條消息和相關顏色

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>