如何基于resortcontainer类div的data属性值动态更新data-view属性

• data() 与 attr() 混用导致读取值不同步。jQuery 的 .data() 方法首次读取元素的 data 属性后，会将值存入内部缓存，后续读取不会再同步 DOM 上的实际属性变更。你修改属性时用的是 .attr('data-resort', 1) 直接操作 DOM 属性，但读取值时用 .data('resort')，拿到的是首次缓存的旧值，自然判断逻辑出错。
• data-resortavail 由独立 AJAX 逻辑修改后，没有主动调用 findAttributes() 函数，因此属性变更后不会触发 data-view 的更新。

方案1：最小改动修复现有代码（无需修改原有业务逻辑） #

统一 data 属性的读写方式，和你现有修改属性的逻辑对齐，全用 .attr() 操作：

let findAttributes = function(){
   j$('.resortcontainer').each(function(){
     // 统一用attr读取，和修改属性的方式保持一致
     let countavail = j$(this).attr("data-resortavail");
     let countfilter = j$(this).attr("data-resort");
     j$(this).attr('data-view', (countavail == 1 && countfilter == 1) ? 1 : 0);
   })
}

然后在 AJAX 逻辑修改完 data-resortavail 属性的代码后，主动调用一次 findAttributes() 触发更新即可。

方案2：自动监听属性变更（无需手动调用函数） #

如果不想修改现有 AJAX 代码，可以用 MutationObserver 自动监听属性变更，只要 data-resort 或 data-resortavail 变化就自动更新 data-view：

jQuery(document).ready(function(){
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // 仅目标属性变更时触发更新
      if (mutation.attributeName === 'data-resort' || mutation.attributeName === 'data-resortavail') {
        findAttributes();
      }
    });
  });
  // 配置监听规则：监听属性变更
  const config = { attributes: true };
  // 给所有resortcontainer绑定监听
  j$('.resortcontainer').each(function(){
    observer.observe(this, config);
  });
})

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