html 類別沒有更新（沒有頁面刷新）

Question

我想要更新一個 HTML 類別（無需頁面刷新），實際值正在更新，頁面上的其他項目也正確，但我無法使用程式碼 I' 更新該類別的背景顏色我正在使用。

我正在嘗試得到這個：

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

更改為此（從 bg-green 到 bg-red）：

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

所以我的程式碼如下所示：

<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 是這樣的：

$.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);

頁面載入時alert_colour的值為info-box-icon bg-green。

頁面載入時，它可以正常工作並顯示綠色框，但如果alert_colour 的值更改為info-box-icon bg-red 它不會更新除非我刷新頁面。

在控制台日誌輸出中，我看到它正確更新（當值更改時從info-box-icon bg-green 到info-box-icon bg-red ，但在螢幕上它只是保持頁面載入時的狀態。頁面上還有其他值（文字）正在更新，只是類別元素沒有更新。

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>