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

Posted 2023-05-08

【中文标题】$.each() 中带有 CSS 变量的样式

【英文标题】：Style with CSS variables in $.each()

【发布时间】：2021-12-07 10:00:33

【问题描述】：

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

我正在使用的代码示例：

$(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>

【问题讨论】：

错字？ '<div style="font-size: 12px;"' 最后缺少>...'<div style="font-size: 12px;">' （所有div）

CSS Variables/Custom Properties 是 CSS 中的一个特定概念——您的意思是您要尝试在 style 属性中应用样式吗？

@AlexanderNied 如果是错字，我不会回答：-D

工作演示jsfiddle.net/bZezzz/o7gqwrjn/4

正确解决方案：jsfiddle.net/khrismuc/g16fxd79

【参考方案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/

【参考方案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 是一个数组。您必须正确索引它才能获取每个部分。

【讨论】：

非常感谢，对我帮助很大。 :DDD