$.each() 中带有 CSS 变量的样式

Question

我正在尝试为链接的“值”变量添加样式，但没有成功。有人可以帮帮我吗？

我正在使用的代码示例：

$(document).ready(function(){
  $(".guide").append(function(){
    $.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 + '</div>' +'<div style="font-size: 14px;">' + field + '</div>' + '<div style="font-size: 18px;">' + field + '</div>');
      });
    });
  });
});

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

<div class="guide"></div>

Answer 1

根据您的数据结构，您必须在 result.values[0] 上“循环”，并将您的“样式”存储在数组中，然后访问值和样式的相应索引 (i)。

$(document).ready(function(){
  $(".guide").append(function(){
    $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/10Ct44JBW-CyoApJXIV87jeVU3Rr-fiLTdoTIJdbSwG8/values/page1!A2:C3?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI"
    
, function(result){
      let style = ['12','14','18'];
      $.each(result.values[0], function(i, field){
        $(".guide").append( '<div style="font-size:'+style[i]+'px;">' + field + '</div>');
      });
    });
  });
});

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

<div class="guide"></div>

但是Chris G 使用Array.map 共享了一个更合适的方法

https://jsfiddle.net/khrismuc/g16fxd79/

Answer 2

考虑以下问题：https://jsfiddle.net/Twisty/08a2rps7/11/

HTML

<div class="guide"></div>

CSS

.sm {
  font-size: 12px;
}
.rg {
  font-size: 14px;
}
.lg {
  font-size: 18px;
}

JavaScript

$(function() {
  $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/10Ct44JBW-CyoApJXIV87jeVU3Rr-fiLTdoTIJdbSwG8/values/page1!A2:C3?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI", function(result) {
    var classes = [
      "sm",
      "rg",
      "lg"
    ];
    $.each(result.values[0], function(i, field) {
      $(".guide").append('<span class="' + classes[i] + '">' + field + '</span>');
    });
  });
});

您可以选择使用 DIV 与 SPAN，但 DIV 自然会阻塞，因为 SPAN 是内联的。您的 result.values 是一个或多个数组，因此，field 是一个数组。您必须正确索引它才能获取每个部分。