将jQuery变量传入进度条style属性

首先直接回答你的疑问：.append()方法并不适合这个场景。.append()是用来向元素内部追加新内容的（比如往进度条里加额外的文本或DOM元素），但你需要的是修改现有进度条的宽度样式和文本内容，所以应该用专门修改属性/样式的方法。

下面是完整的实现方案，用jQuery的AJAX获取数据后更新进度条：

步骤1：调整HTML结构 #

先把进度条的初始值设为一个默认值（比如0%），等AJAX返回数据后再替换：

<div class="progress" style="height: 30px">
  <div class="progress-bar progress-bar-striped progress-bar-animated" 
       role="progressbar" 
       style="width: 0%" 
       aria-valuenow="0" 
       aria-valuemin="0" 
       aria-valuemax="100">
    Remaining Stock: 0%
  </div>
</div>

步骤2：编写jQuery AJAX代码 #

通过AJAX请求后端获取库存占比，然后更新进度条的样式和内容：

$(document).ready(function() {
  // 发起AJAX请求到你的计算脚本
  $.ajax({
    url: 'your-stock-calculator.php', // 替换成你的实际AJAX文件路径
    method: 'GET', // 或者POST，根据后端接收方式调整
    dataType: 'json', // 假设后端返回JSON格式（推荐）
    success: function(data) {
      // 假设后端返回的JSON是 { "remainingPercent": 65 }
      var percent = data.remainingPercent;
      
      // 获取进度条元素
      var $progressBar = $('.progress-bar');
      
      // 1. 更新进度条宽度
      $progressBar.css('width', percent + '%');
      
      // 2. 更新无障碍属性（aria-valuenow），保证页面可访问性
      $progressBar.attr('aria-valuenow', percent);
      
      // 3. 更新显示的文本内容
      $progressBar.text('Remaining Stock: ' + percent + '%');
    },
    error: function(xhr, status, err) {
      // 处理请求失败的情况，比如显示错误提示或默认值
      console.error('Failed to fetch stock data:', err);
      $('.progress-bar').text('Stock data unavailable');
    }
  });
});

后端返回格式说明 #

如果你的后端返回的是纯数值（比如直接输出65而不是JSON），可以把dataType改成'text'，然后在success回调里直接用var percent = parseInt(response);来转换数值。

为什么不用.append()？ #

再强调一下：.append()会在进度条的现有文本后面追加内容，比如如果原来的文本是"Remaining Stock: 0%"，用.append(percent)会变成"Remaining Stock: 0%65"，这显然不是你想要的效果。我们需要的是替换现有内容和修改样式，所以.css()、.attr()和.text()才是正确的方法。

内容的提问来源于stack exchange，提问作者Sam.92