搜索

首页  >  问答  >  正文

html 类没有更新(没有页面刷新)

我想要更新一个 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-greeninfo-box-icon bg-red ,但在屏幕上它只是保持页面加载时的状态。页面上还有其他值(文本)正在更新,只是类元素没有更新。

P粉105971514P粉105971514472 天前541

全部回复(1)我来回复

  • P粉514001887

    P粉5140018872023-09-10 18:40:42

    由于您似乎将 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
  • 取消回复