Question

我建立了一个随机报价生成器网站。它从forismatic中获取引号，并有一个获取新引号的按钮，以及一个Tweet引用的按钮。当它获得新报价时，网站颜色会发生变化。

我是JavaScript的初学者，我正在寻找有关我的代码的任何提示，以及以下问题的答案。我使用了变量＆＃34; request＆＃34;从forismatic API获取JSON。如下所示，我需要从变量请求中重新调整实际代码，以使网站正常工作。我想知道是否有人可以解释原因。谢谢。

这项工作：

// initialize JSON request as a variable
var request =
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

var words = '“' + json.quoteText;

var author = '--' + json.quoteAuthor;

// update quote and author
$(".quote").html(words);
$(".author").html(author);

// update Tweet link
$("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

// randomize background color variables
var i = Math.floor(Math.random() * 10 % 7);
var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

// change color of each element, with fade
$("body").animate({"background-color": colors[i]}, 1000);
$(".btn-primary").animate({"background-color": colors[i]}, 1000);
$(".quote").animate({"color": colors[i]}, 1000);
$(".author").animate({"color": colors[i]}, 1000);
$(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
});


// use request to populate a quote upon page opening
$(document).ready(function(request) {
  $("#btn-quote").on("click", function() {  

    // identical to request variable but needs to be repasted to work upon clicks
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

    var words = '“' + json.quoteText;

    var author = '--' + json.quoteAuthor;

    // update quote and author
    $(".quote").html(words);
    $(".author").html(author);

    // update Tweet link
    $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

    // randomize background color variables
    var i = Math.floor(Math.random() * 10 % 7);
    var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

    // change color of each element, with fade
    $("body").animate({"background-color": colors[i]}, 1000);
    $(".btn-primary").animate({"background-color": colors[i]}, 1000);
    $(".quote").animate({"color": colors[i]}, 1000);
    $(".author").animate({"color": colors[i]}, 1000);
    $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
        });
      });
    });

这不会（在页面加载时引用加载，但在点击时不会更新）只有差异在＆＃34; $（文档）.ready＆＃34;在底部的代码

// initialize JSON request as a variable
var request =
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

  var words = '“' + json.quoteText;

  var author = '--' + json.quoteAuthor;

  // update quote and author
  $(".quote").html(words);
  $(".author").html(author);

  // update Tweet link
  $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

  // randomize background color variables
  var i = Math.floor(Math.random() * 10 % 7);
  var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

  // change color of each element, with fade
  $("body").animate({"background-color": colors[i]}, 1000);
  $(".btn-primary").animate({"background-color": colors[i]}, 1000);
  $(".quote").animate({"color": colors[i]}, 1000);
  $(".author").animate({"color": colors[i]}, 1000);
  $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
      });


  // use request to populate a quote upon page opening
  $(document).ready(function(request) {
  $("#btn-quote").on("click", function(request) {  
  request;
    });
  });

Answer 1

考虑将请求变为函数而不是变量：

// initialize JSON request as a variable
function request() {
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {

        var words = '“' + json.quoteText;

        var author = '--' + json.quoteAuthor;

        // update quote and author
        $(".quote").html(words);
        $(".author").html(author);

        // update Tweet link
        $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author);

        // randomize background color variables
        var i = Math.floor(Math.random() * 10 % 7);
        var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c'];

        // change color of each element, with fade
        $("body").animate({"background-color": colors[i]}, 1000);
        $(".btn-primary").animate({"background-color": colors[i]}, 1000);
        $(".quote").animate({"color": colors[i]}, 1000);
        $(".author").animate({"color": colors[i]}, 1000);
        $(".btn-social-icon").animate({"background-color": colors[i]}, 1000);
    });
}


// use request to populate a quote upon page opening
$(document).ready(function() {
    $("#btn-quote").on("click", request);
});

API中的随机代码生成器 - 变量在代码中不起作用？

1 个答案: