Ich möchte eine HTML-Klasse aktualisieren (ohne Seitenaktualisierung), die tatsächlichen Werte werden aktualisiert und die anderen Elemente auf der Seite sind korrekt, aber ich kann die Hintergrundfarbe der Klasse mit dem von mir verwendeten Code nicht aktualisieren .

Ich versuche das zu bekommen:

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="info-box-icon bg-green"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

Ändern Sie dazu (von BG-Grün zu BG-Rot):

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="info-box-icon bg-red"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

Mein Code sieht also so aus:

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="alert_colour"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

JavaScript ist so:

$.ajax({
url: "update_all.php",
type: "post",
dataType: "json",
success: function(response) {                
    var len = response.length;
    for (var i = 0; i < len; i++) {
    var alert_colour = response[i].alert_colour;
    $(".alert_colour").attr('class', alert_colour);  
    console.log(alert_colour);

    }
},
error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus, errorThrown);
}
});

}, 1000);

Der Wert von warning_colour ist info-box-icon bg-green, wenn die Seite geladen wird.

Wenn die Seite geladen wird, funktioniert sie einwandfrei und zeigt das grüne Feld an, aber wenn alert_colour 的值更改为 info-box-icon bg-red, wird sie nicht aktualisiert, es sei denn, ich aktualisiere die Seite.

In der Protokollausgabe der Konsole sehe ich, dass die Aktualisierung korrekt erfolgt (wenn sich der Wert von info-box-icon bg-green 到 info-box-icon bg-red zu info-box-icon bg-red ändert), aber auf dem Bildschirm bleibt er einfach derselbe wie beim Öffnen der Seite geladen. Es gibt andere Werte (Text) auf der Seite, die aktualisiert werden, nur die Klassenelemente werden nicht aktualisiert