HTML-Klassen werden nicht aktualisiert (keine Seitenaktualisierung)

Question

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

.

Answer 1

由于您似乎将 alert_status 的类别更改为 alert_colour 或类似的随机内容，因此您失去了更改未来类别的参考点。

对于我的回答，我实际上引用了alert_icon的父级，因为这将允许您引用它，无论类如何。

然后作为测试，我使用 addClass 添加 info-box-icon bg-red。然后我使用不带参数的removeClass，并将其与addClass链接以添加info-box-icon bg-green。

此外，由于您是从数组中获取类，因此只需用空格连接数组即可将它们传递给 jQuery 的 addClass 函数。

使用attr，每次都覆盖它。

let green = ["info-box-icon","bg-green"];
let red = ["info-box-icon","bg-red"];
$alertBox = $(".alert_icon").parent();

$alertBox.addClass(red.join(" "));
$alertBox.removeClass().addClass(green.join(" "));

.bg-red{background:red;}
.bg-green{background:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12">
  <div class="info-box">
    <span class=""><i class="alert_icon">alert</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>