Question

经过几个小时的努力，第一部分我终于成功了。

但是我想嵌套两个额外的函数，第一个用于生成随机颜色，第二个用于将随机颜色设置为id为#gradient的div，表示背景。

到目前为止，这是代码，你能帮帮我吗？

$(document).ready(function() {
      $("#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;
          var author = json.quoteAuthor;
          $(".quoteText").text("'" + quote + "'");
          $(".quoteAuthor").text("-" + author + "-");


        function RandomColor() {
          var letters = '0123456789ABCDEF';
          var color = '#';
          for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
        }

        function changeColor() {
              $("#gradient").css("background-color", RandomColor()));}});});});

Answer 1

JQuery docs：

jQuery.getJSON（url [，data] [，success]）

看着你的代码，你就明白了。当您致电function时，您正在发送$.getJSON() 回电。要开始调试它，我会首先整理代码（不要对自己或未来的编码器这样做，你的编辑很可能有一个＆＃34;重新格式代码＆＃34;选项来添加适当的缩进。调试不整洁的代码这样会让你头疼。）

一旦你整理好你的代码就会变成这个，并修复一些错误的结束/开放。

$(document).ready(function () {

    $("#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;
            var author = json.quoteAuthor;
            $(".quoteText").text("'" + quote + "'");
            $(".quoteAuthor").text("-" + author + "-");


            function RandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

            function changeColor() {
                $("#gradient").css("background-color", RandomColor());
            }
        });

    });

});

第一个问题

function changeColor() {
    $("#gradient").css("background-color", RandomColor());
}

该功能永远不会被调用。你只是声明它，而不是称之为。只要把它里面的东西拿出来，你就得到了它。我还会在该范围之外使用函数RandomColor()（我没有检查它是否有效......），以防你想重用它。

你最终得到了这个：

$(document).ready(function () {

    $("#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;
            var author = json.quoteAuthor;
            $(".quoteText").text("'" + quote + "'");
            $(".quoteAuthor").text("-" + author + "-");

            $("#gradient").css("background-color", RandomColor());
        });

    });

});

function RandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

此外，您只会在成功时更改div的颜色。如果您想在失败时执行某些操作，请使用以下命令：

jQuery 1.5中的Promise接口还允许jQuery的Ajax方法（包括$ .getJSON（））在单个请求上链接多个.done（）,. aways（）和.fail（）回调，甚至在请求完成后分配这些回调。如果请求已经完成，则立即触发回调。

$.getJSON("...", function (json) {
    ...
}).fail(function() {
    console.log( "error" );
});

希望有所帮助。

将JSON加载到div中并同时更改按钮单击时的背景颜色

1 个答案: