javascript - 使用 AJAX post 更改数据属性标签后 CSS 未更​​改

Question

我正在设计一个网站，该网站根据连接的 MySQL 数据库表的可用性字段使用绿色或红色指示器显示资源的可用性。

我要更改的元素是一个 span 元素:

 <span class="equipment" data-id="1" data-available="1" data-location="0-0"></span>

这由 JQuery 解析可用性和位置的数据属性，并与带有 AJAX post 的 MySQL 数据库进行比较以注意可用性的变化，这些变化应该传播到网页，按照下面改变指示器的颜色CSS。

.equipment[data-available='1'] {
 background-color: rgb(0,226,0); //green
 }

.equipment[data-available='0'] {
 background-color: rgb(226,0,0); //red
 }

如下所示，AJAX 请求识别数据库中的更改并成功从 php 文件返回，仅返回新的可用性(0 或 1)。如果我 console.log() php post URL，equipment_span.data("available") 返回并存储在 old_avail 中的值似乎已更新为新值发生数据库更改后需要。但是，对此的更改不会反射(reflect)在指示器的颜色变化中。

function update_avail() {

    $('.equipment').each( function () {
        var equipment_span = $(this);

        var old_avail = equipment_span.data("available");
        var loc = equipment_span.data("location");

        $.post('avail.php?a='+old_avail+'&l='+loc, function(new_avail) {
            if(new_avail != old_avail) {
              equipment_span.data("available", new_avail);  
            }
        })
    })
}

如果任何人都可以提供任何关于出了什么问题的指示，那就太好了，因为在这个阶段这已经困扰了我几个小时。

Answer 1

是因为这一行:

equipment_span.data("available", new_avail);

当 jquery 管理数据属性时，它在内存中而不是“在页面上”进行管理，因此如果您检查页面，它将显示 data-available="whatever it was on page load"

你需要做的:

equipment_span.attr("data-available", new_avail);