如何讓jQuery聊天回覆我

Question

我正在嘗試在我的移動應用上創建前端聊天功能。我一直在關注如何做到這一點的YouTube系列，但在視頻14中，這位先生走向了一個與我想要的不同的方向。我想成爲第一個打字的人，然後讓「機器人」響應我（以預定的字符串）。不幸的是，他是如何擁有它，是機器人問你的名字，然後你迴應，然後機器人說很高興見到你（姓名）

我的問題是使用我將提供的代碼，我怎麼能得到「機器人」在我先輸入後迴應我？

$(function(){ 

    $("#chatSend").click(function(){ 

    var username = "<span class = 'chatUsername' =>CNN_News: </span>"; 

    var newMessage = $("#chatTextBox").val(); 

    $("#chatTextBox").val(""); 

    var prevState = $("#chatContainer").html(); 

    if (prevState.length > 7){ 
     prevState = prevState + "<br>"; 
    } 

    $("#chatContainer").html(prevState + username + newMessage); 

    $("#chatContainer").scrollTop($("#chatContainer").prop("scrollHeight")); 

    }); 

}); 

Answer 1

如果問題是，機器人問他的問題，然後再鍵入您的問題/答案......等等，你想成爲第一，那麼就忽略了機器人發送的內容。

當您加載頁面並開始聊天時，請清除聊天窗口中的任何內容。 //首先開始清空任何機器人輸入 $（「＃chatContainer」）。empty（）;

//start your first line 

或...如果你想要一個更好的答案，然後解釋機器人如何工作。

這個問題仍然令人困惑，但這裏有一個快速的bot演示，它非常基本和簡單。

http://jsfiddle.net/91svxht9/4/ 

和代碼

的Javascript

var username = "John"; 
var botname = "Bot"; 
var sendBtn = $("#chatSend"); 
var chatContainer = $("#chatContainer"); 
var botResponses = [ 
    "Wow, thats cool", "Im a bot", "who are you", "thats soo cool" , "give me all your money" 
]; 
var addMessage = function(who, msg) { 
    var ownerclass = "bot"; 
    if (who == username) {ownerclass = "mine";} 
    chatContainer.append("<div class='message "+ownerclass+"'><span>"+who+"</span>: "+msg+"</div>"); 
    sendBtn.attr("disabled", true);//disable send until bot responds 
    chatContainer.scrollTop($("#chatContainer").prop("scrollHeight"));  
} 
var botRespond = function() { 
    var msg; 
    msg = botResponses.shift(); 
    if (!msg) { msg = "i have nothing more to say";} 
    addMessage(botname, msg); 
    sendBtn.removeAttr("disabled");//disable send until bot responds 
} 


$(function(){ 
    sendBtn.click(function() { 
    var msg = $("#chatTextBox").val(); 
    if (!msg) {alert("enter message before clicking send");return false;} 
    addMessage(username, msg); 
    setTimeout(function() {botRespond();}, 2000); 
    }); 
}); 

HTML

<div id="chatContainer"> 

</div> 

<div id="chatControls"> 
    <textarea id="chatTextBox" placeholder = "Enter your message  
    here..."> 
    </textarea> 
    <button id="chatSend">Send</button> 
</div> 

CSS

#chatContainer{ 
    width: 95%; 
    height: 65px; 
    background-color: white; 
    border: 1px solid #333; 
    margin: 0 auto; 
    border-radius: 5px; 
    margin-top: 10px; 
    opacity: .9; 
    overflow-y:scroll !important; 
    padding: 5px; 
} 
#chatTextBox{ 
    resize: none; 
    width: 65%; 
    height: 35px !important; 
    float: left; 
    opacity: .9; 
} 
#chatControls{ 
    width: 100%; 
    padding-left: 10px; 
    padding-right: 10px; 
    display: inline-block; 
} 
#chatSend{ 
    resize: none !important; 
    width: 50%; 
    height: 35px !important; 
    display: inline-block; 
    max-width: 30%; 
    float: right; 
    opacity: .9; 
    padding: 5px; 
} 


.message > span { 
    color: red; 
    font-weight: bold; 
} 
.chatBot{ 
    color: #484d97; 
    font-weight: bold; 
} 
.message {margin-top: 4px;} 
.message.mine { 
    color: black; 
} 
.message.bot { 
    color: gray; 
} 
.message.bot>span { 
    color: green; 
}