请求协助：实现点击按钮时嵌套随机颜色生成与背景设置功能

AI 小北

2026-5-15

解决你的随机背景色与JSON加载功能问题

没问题，我帮你梳理下代码里的小问题，同时实现你要的随机背景色功能：

先说说代码里的几个小问题：

选择器错误：$("quoteText") 和 $("quoteAuthor") 缺少选择器前缀（如果是id元素要加#，class元素加.，这里默认你用的是id）
语法错误：changeColor函数里的$("#gradient").css("background-color", RandomColor()))多了一个闭合括号
未调用颜色修改函数：你定义了changeColor但没执行，所以背景色不会变化
函数位置优化：把颜色相关函数放在外层更合理，避免每次点击按钮都重复创建函数

修正后的完整代码：

$(document).ready(function() {
  // 生成随机十六进制颜色的函数，重命名更语义化
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  // 给#gradient设置随机背景色的函数
  function setGradientBg() {
    $("#gradient").css("background-color", getRandomColor());
  }

  $("#btn").on("click", function() {
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
      var quote = json.quoteText;
      // 处理API返回作者为空的情况，避免显示空的"- -"
      var author = json.quoteAuthor || "Unknown Author";

      // 修正选择器，确保能正确选中元素
      $("#quoteText").text(`'${quote}'`);
      $("#quoteAuthor").text(`-${author}-`);

      // 调用函数更新背景色
      setGradientBg();
    });
  });
});