在$.each()中使用CSS variables为链接values变量设置样式失败，寻求解决方法

核心错误原因 #

• 你错误将异步$.getJSON请求放在了$().append()的回调函数中：append方法的回调需要同步返回待插入的DOM内容，异步请求的返回结果无法被该回调捕获，导致插入逻辑失效。
• 谷歌表格接口返回的result.values中每一项field是对应行的列数组（你请求的是A2:C3区间，每一行field对应[A列值, B列值, C列值]），原代码重复拼接三次field会把整行值重复输出三遍，也不符合给不同列设置不同字号的需求。

修正后代码 #

JS代码 #

$(document).ready(function(){
  // 直接发起JSON请求，不需要套在append回调里
  $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/10Ct44JBW-CyoApJXIV87jeVU3Rr-fiLTdoTIJdbSwG8/values/page1!A2:C3?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI", function(result){
    $.each(result.values, function(i, field){
      // 分别取三个列的值对应不同字号样式
      $(".guide").append( 
        '<div style="font-size: 12px;">' + field[0] + '</div>' +
        '<div style="font-size: 14px;">' + field[1] + '</div>' + 
        '<div style="font-size: 18px;">' + field[2] + '</div>'
      );
    });
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="guide"></div>

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