HTML-Inhalt je nach Javascript-Funktion ersetzen

Question

Ich möchte verschiedene HTML-Elemente zum Status einer Variablen anzeigen lassen.

In meiner HTML-Datei, die ich habe:

<div id="dustbinstatus"></div> 

Und in meiner JS-Datei, die ich habe:

if (message.payloadString == "full"){ 
    $('#dustbinstatus').append('<i class="material-icons">delete</i>'); 
} 

else if (message.payloadString == "empty"){ 
    $('#dustbinstatus').append('<p> Dustbin ok </p>'); 
} 

Die message.payloadString Variable kann dynamisch WebSockets Verwendung ändern. Mit diesem Beispiel funktioniert es, aber es fügt nur eine neue Zeile hinzu, wenn sich der Status ändert und ich möchte, dass eine einzelne Zeile ersetzt wird und sich je nach Status ändert.

Gibt es eine Möglichkeit, das zu tun?

Vielen Dank!

Olivia

Answer 1

, wenn Sie den Inhalt des DOM-Element ersetzen möchten Sie .html() Funktion jQuery (ähnlich innerhtml von JS) verwenden, müssen wie folgt aussehen:

$('#dustbinstatus').html('<p> Dustbin ok </p>'); 

Answer 2

Verwendung html() statt append()

Append wird verwendet, um die Dom element an das Ende der bestehenden anzuhängen.

1. Platz: können Sie html()

$('#dustbinstatus').html('<p> Dustbin ok </p>'); 

2. verwenden: Sie auch empty()

$('#dustbinstatus').empty().append('<p> Dustbin ok </p>'); 

Answer 3

Ändern Sie Ihre .append Funktion mit .html verwenden können.

Append einfach erklärt es sich von selbst, es anhängen wird, was es enthält,

Html wird die gesamte HTML-Teil innerhalb des ausgewählten Elements ersetzen.

Answer 4

Sie sollten Ihre zuvor erstellte Zeile entfernen, bevor Sie eine neue hinzufügen. Etwas wie folgt aus:

$('#dustbinstatus').empty(); 
if (message.payloadString == "full"){ 
    $('#dustbinstatus').append('<i class="material-icons">delete</i>'); 
} 

else if (message.payloadString == "empty"){ 
    $('#dustbinstatus').append('<p> Dustbin ok </p>'); 
} 

Answer 5

 $('#dustbinstatus').html('');//blank existing dom before append 
     if (message.payloadString == "full"){ 
     $('#dustbinstatus').append('<i class="material-icons">delete</i>'); 
     } else if (message.payloadString == "empty"){ 
      $('#dustbinstatus').append('<p> Dustbin ok </p>'); 
     } 

Answer 6

Das Problem ist, dass Sie das Element anhängen, so dass es das Element am Ende anhängen, daher werden Sie eine neue Zeile jedes Mal bekommen.

Sie können es durch die zwei Möglichkeiten:

• Sie Anzeige keine und fügen Sie eine Klasse aktiv anzuzeigen das Element anstelle von Anhängen festlegen.

var message = "full"; 
 
if (message == "full"){ 
 
    $('.material-icons').attr('class', 'active'); 
 
    $('#dustbinstatus p').attr('class', 'notactive'); 
 
} 
 

 
else if (message == "empty"){ 
 
    $('#dustbinstatus p').attr('class', 'active'); 
 
    $('.material-icons').attr('class', 'notactive'); 
 
}

.active{ 
 
    display:block; 
 
} 
 

 
.notactive{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dustbinstatus"> 
 
    <i class="material-icons">delete</i> 
 
    <p> Dustbin ok </p> 
 
</div>

• zweiter Weg ist in oben genannten Antworten $(#dustbinstatus).html() wie gesagt zu verwenden.