页面加载时如何将JSON数据更新到HTML span的data-value中？

我明白你的问题了——你通过异步JSON请求更新#count的data-value，但counterup插件在DOM加载完成后就已经初始化，读取的是初始的0，等你更新完值之后插件并没有重新读取新值，导致页面加载时显示的还是旧内容。不用body.onload的话，有两个靠谱的解决思路：

方法1：等JSON数据加载完成后再初始化插件 #

把counterup的初始化逻辑放到getJSON的回调函数里，确保插件启动时读取的已经是更新后的data-value：

const url = "../assets/pages/data.json"; 
jQuery(document).ready(function(){ 
  $.getJSON(url, function(setData){ 
    const tsCounter = document.querySelector('#count'); 
    // 先更新data-value
    tsCounter.dataset.value = setData[1].count;
    // 再初始化counterup插件
    $('#count').counterUp({
      // 这里填写你的插件配置，示例参数：
      delay: 10,  // 数字递增的延迟间隔
      time: 1000  // 完成递增的总时间
    });
  }); 
});

方法2：更新值后手动重新触发插件 #

如果你的插件已经提前初始化过（比如在其他脚本里），那可以在更新data-value之后，手动销毁旧的插件实例再重新初始化：

const url = "../assets/pages/data.json"; 
jQuery(document).ready(function(){ 
  // 先初始化插件（如果之前已经执行过这一步，可跳过）
  $('#count').counterUp({
    delay: 10,
    time: 1000
  });

  $.getJSON(url, function(setData){ 
    const tsCounter = document.querySelector('#count'); 
    tsCounter.dataset.value = setData[1].count;
    
    // 先销毁旧的插件实例，再重新初始化
    if ($('#count').data('counterup')) {
      $('#count').counterUp('destroy'); // 多数主流counterup插件支持destroy方法
    }
    $('#count').counterUp({
      delay: 10,
      time: 1000
    });
  }); 
});

备选方案：如果插件没有destroy方法 #

要是你的counterup版本不支持destroy，可以手动清除元素上的插件绑定事件和数据，再重新初始化：

// 移除插件绑定的所有事件和关联数据
$('#count').off().removeData('counterup');
// 重新初始化插件
$('#count').counterUp({
  delay: 10,
  time: 1000
});

这样就能确保counterup插件读取到的是从JSON获取的最新值，而不是页面加载时的初始值了。

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