无页面刷新下HTML类无法更新问题求助

需无刷新更新HTML元素的class以切换背景色，控制台显示后端返回值已更新，但页面背景色未变化，仅刷新页面才生效。页面其他文本内容可正常更新。

初始目标 #

将带bg-green类的info-box-icon元素切换为bg-red类：
初始状态代码：

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

目标状态代码：

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

当前代码 #

HTML：

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

问题原因 #

第一次AJAX请求后，attr('class', alert_colour)会完全替换元素的class为info-box-icon bg-green，原来的alert_colour类被彻底移除。后续AJAX请求再用$(".alert_colour")选择元素时，已经找不到目标元素，自然无法更新class。

解决方案 #

方案1：保留固定标识类，仅切换颜色类 #

修改HTML，给元素保留一个固定类作为选择器，只切换背景色类：

<!-- HTML修改：保留alert-colour-container作为固定选择器，同时包含基础样式类 -->
<span class="alert-colour-container info-box-icon bg-green"><i class="alert_icon"></i></span>

// JavaScript修改：移除旧颜色类，添加新颜色类
$.ajax({
url: "update_all.php",
type: "post",
dataType: "json",
success: function(response) {                
    var alert_colour = response[0].alert_colour;
    // 从返回的完整class字符串中提取颜色类（如bg-green/bg-red）
    var colorClass = alert_colour.split(' ')[1];
    // 先移除所有可能的背景色类，再添加新类
    $(".alert-colour-container").removeClass("bg-green bg-red").addClass(colorClass);
    console.log(alert_colour);
},
error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus, errorThrown);
}
});

如果后端可以直接返回bg-green/bg-red，直接使用返回值即可，无需split处理。

方案2：使用ID作为固定选择器 #

给元素添加唯一ID，确保每次都能精准定位：

<!-- HTML修改：添加唯一ID -->
<span id="alert-colour" class="info-box-icon bg-green"><i class="alert_icon"></i></span>

// JavaScript修改：用ID选择器定位元素
$.ajax({
url: "update_all.php",
type: "post",
dataType: "json",
success: function(response) {                
    var alert_colour = response[0].alert_colour;
    $("#alert-colour").attr('class', alert_colour);  
    console.log(alert_colour);
},
error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus, errorThrown);
}
});

该方案适合单个目标元素的场景，无需修改后端返回值。

方案3：通过父元素定位（无需修改HTML） #

依赖稳定的DOM结构，通过父元素间接定位目标元素：

$.ajax({
url: "update_all.php",
type: "post",
dataType: "json",
success: function(response) {                
    var alert_colour = response[0].alert_colour;
    // 通过.info-box父元素找到内部第一个span
    $(".info-box span:first-child").attr('class', alert_colour);  
    console.log(alert_colour);
},
error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus, errorThrown);
}
});

内容的提问来源于stack exchange，提问作者omega1