Inhalt eines Containers in Jquery ersetzen

Question

Kurz vor dem Abschluss meines Chatbot und einer der letzten Punkte ist es, einen Platzhalter hinzuzufügen, wenn der Bot tippt. Ich möchte die Antwort um eine Zeitspanne verzögern, die von der Länge der Antwort abhängig ist. Während der Verzögerung möchte ich einen Platzhalter im HTML erscheinen.

die Funktion

beginnt

function send_message(message){ 

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


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

dann durch

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

ersetzt werden ist es eine Möglichkeit, den ersten Schritt durchzuführen, Pause, rückwärts dann diese Aktion und die zweite durchführen?

Ich habe einen Teilerfolg mit einem Satz Timeout-Funktion hatte, aber es gibt immer noch Fehler

Ich

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

Answer 1

Ich weiß nicht, einen codepen für diejenigen eines Geistes Zugabe wie Sie die message in der zweiten span anhängen ... Aber das wäre die "Zeit", um die .placeholderBot Ziel.

ich Sie annehmen, dass so etwas wie:

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

Dann können Sie versuchen, von .replaceWith() zu verwenden:

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

.replaceWith() genau das passende Element ersetzt (nicht nur ihr Inhalt) mit dem, was als vorgesehen ist Streit.

---

EDIT

Meine Antwort war über die Elemente, die Sie in Ihrem ersten Anfügen verwenden müssen:

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

.currentMessage und .placeholderBot verwendet werden kann, die „Bot ist die Eingabe“ und die Nachricht, die Sie zu injizieren vom Server bekommen.

Ich machte Sie eine Nutzungsdemo.

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

Hinweis $(".currentMessage").toggleClass("currentMessage oldMessage");
, dass die Klasse currentMessage aus der letzten bot Antwort zu entfernen und ersetzen Sie es durch eine andere Klasse. Wenn nicht, wird möglicherweise die nächste Nachricht an der falschen Stelle eingefügt.

, die gleich ist:
$(".currentMessage").removeClass("currentMessage").addClass("oldMessage");