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

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 ] )

查看您的代码，您明白了。当您调用 $.getJSON() 时，您正在发送一个函数 回调。要开始调试它，我会先整理代码(不要对你自己或 future 的编码人员这样做，你的编辑器很可能有一个“重新格式化代码”选项来添加适当的缩进。调试这样不整洁的代码会让你头疼 future 。)

一旦您整理并修复了一些错误的关闭/打开，您的代码就会变成这样。

$(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 的颜色。如果您想在失败时执行某些操作，请使用以下命令:

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.getJSON(), to chain multiple .done(), .always(), and .fail() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

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

希望对您有所帮助。