Question

现在关闭完成我的Chatbot，最后几个接触之一就是在机器人输入时添加一个占位符。我想延迟响应一段时间，这取决于响应的长度。在延迟期间，我希望占位符出现在html中。

功能开始

function send_message(message){

var prevState = $('#container').html();


$("#container").html(prevState + "<span class = 'currentMessage'>" + "<span class = 'placeholderBot'>Donny is typing... </span>" + "</span>");

然后被

取代

$("#container").html(prevState + "<span class = 'currentMessage'>" + "<span class = 'bot'>Donny: </span>" + message + "</span>");

有没有办法执行第一次移动，暂停，然后反转该操作并执行第二次操作？

我在设置超时功能方面取得了部分成功，但仍有错误

我为心灵的人添加了一个codepen

https://codepen.io/BenjieCrumpet/pen/OxNdGa

Answer 1

我不知道你如何在第二个message中附加span ...但这将是定位.placeholderBot的“时间”。

我想你做的事情如下：

$(".currentMessage").append(message);

然后您可以尝试使用.replaceWith()：

$(".currentMessage .placeholderBot").replaceWith("<span class = 'bot'>Donny: </span>");

.replaceWith()将匹配元素（不仅仅是其内容）替换为作为参数提供的内容。

<小时/> 的修改

我的回答是要使用你在第一次追加时所拥有的元素：

$("#container").html(prevState + "<span class = 'currentMessage'>" + "<span class = 'placeholderBot'>Donny is typing... </span>" + "</span>");

.currentMessage和.placeholderBot可用于注入“bot is typing”以及从服务器获取的消息。

我为你做了一个用法演示。

function bot(){
  var prevState = $("#container").html()+"Guest: "+$("#guestInput").val()+"<br>";

  $("#container").html(prevState + "<span class='currentMessage'>" + "<span class='placeholderBot'>Donny is typing... </span>" + "</span><br>");

  // Simulating a delay here.
  setTimeout(function(){
    var message= "A random answer.";

    $(".currentMessage").append(message);
    $(".currentMessage .placeholderBot").replaceWith("<span class='bot'>Donny: </span>");

    $(".currentMessage").toggleClass("currentMessage oldMessage");
    $("#guestInput").val("");
  },2000);
}

$("#guestInput").on("change",function(e){
  bot();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  ---SYSTEM---: Welcome to chatbot.<br>
  <br>
  
</div>
<br>
<input type="text" id="guestInput">

注意$(".currentMessage").toggleClass("currentMessage oldMessage");
这是从最后一个机器人答案中删除类currentMessage并将其替换为另一个类。如果没有，则可能会在错误的位置注入下一条消息。

这与以下相同：
$(".currentMessage").removeClass("currentMessage").addClass("oldMessage");

在Jquery中替换容器的内容

1 个答案: