javascript - 如何让 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 

或者...如果您想要更好的答案，请解释机器人的工作原理。

这个问题仍然令人困惑，但这里有一个非常基本和简单的快速机器人演示。

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