使用jQuery结合JSON操作CSS：外部JSON数值导入遇阻求助

看起来你的核心问题是jQuery的css()方法使用错误，还有代码里的语法问题导致无法正确应用JSON中的数值到CSS属性上。我来一步步帮你修正：

首先，分析你代码里的错误点： #

• 你的css()调用完全不符合语法要求：$(".value_height").css("\"+data.results[i].duration_ratio+\""); 既没有指定要修改的CSS属性（比如height/width），字符串拼接的引号也混乱了。
• 第二个循环里的$(".value_height").css(+data.results[i].duration_ratio +); 有多余的加号，同样缺少属性名，语法完全错误。
• 使用for...in遍历数组不是最佳实践，容易遍历到数组原型上的额外属性，推荐用forEach。

修正后的完整代码示例 #

假设你想用JSON中的duration_ratio值来修改元素的height，用sub_paths里的duration_ratio修改width（你可以根据需求调整属性）：

CSS（保持不变）

body{ font-size: 16px; margin: 1rem auto; width: 100px; }
.value_height{ width:2rem; height: 2rem; background-color: #000000; }

HTML & JavaScript

<body>
<div class="value_height"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 确保引入jQuery -->
<script>
$.getJSON('data/jasonfile.json', function(data) {
  // 遍历results数组中的每一项
  data.results.forEach(function(result) {
    // 将JSON中的字符串数值转为浮点数（因为JSON里存的是字符串）
    const mainRatio = parseFloat(result.duration_ratio);
    // 修改元素的height属性：比如基于原2rem的比例缩放
    $(".value_height").css("height", `${mainRatio * 2}rem`);

    // 遍历sub_paths中的子项
    result.sub_paths.forEach(function(subPath) {
      const subRatio = parseFloat(subPath.duration_ratio);
      // 修改元素的width属性
      $(".value_height").css("width", `${subRatio * 2}rem`);
    });
  });
});
</script>
</body>

关键知识点说明： #

1. css()方法的正确用法：

   • 单个属性：$(selector).css("属性名", "属性值")，比如css("height", "1.12rem")
   • 多个属性：可以传对象，比如css({ height: "1.12rem", width: "0.08rem" })

2. 处理JSON中的数值：
   你的JSON里duration_ratio是字符串类型，必须用parseFloat()或Number()转为数字，才能进行数学计算（比如乘以2rem的基准值）。

3. 数组遍历的最佳实践：
   用forEach替代for...in遍历数组，避免意外遍历到数组原型上的属性，代码可读性也更好。

额外注意事项： #

• 确保jQuery已经正确引入到你的页面中，否则$.getJSON会报错。
• 检查JSON文件的路径是否正确：data/jasonfile.json是相对HTML文件的路径，要保证文件存在且路径无误。
• 如果页面中有多个.value_height元素，现在的代码会把所有元素设置成同一个值。如果需要对应不同的元素，你可以给元素加索引或者唯一标识，再一一对应赋值。

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