提问人：omega1 提问时间：6/28/2023 最后编辑：omega1 更新时间：6/28/2023 访问量：58
HTML 类未更新（未刷新页面）
html class not updating (without page refresh)
问：
我想要更新一个 HTML 类（没有页面刷新），实际值正在更新，页面上的其他项目也正在更新，但我无法使用我正在使用的代码更新类的背景颜色。
我试图得到这个：
<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_colourinfo-box-icon bg-red
在控制台日志输出中，我看到它正确更新（当值更改时从 到 ，但在屏幕上，它只是保持页面加载时的状态。页面上还有其他值（文本）正在更新，只是类元素没有更新。info-box-icon bg-greeninfo-box-icon bg-red
答：
1赞
imvain2
6/28/2023
#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>评论
0赞
omega1
6/28/2023
您好，非常感谢。抱歉，你是对的，在我写的例子中aleet_status它应该是alert_colour。我稍后会检查你的答案，谢谢。
评论
classListdocument.querySelector(".alert_colour").classList.add(alert_colour);