Question

我有var = quotes [{"author": "string", "quote": "string"}]; 在此之前，它只是超长，所以我没有发布它。

现在点击会生成随机引用，并删除完美的标题。

我想要的是如果生成的引用的“作者”是某个作者，则正文的背景会发生变化。

问题是，点击

不会发生这种情况

function randomQuote() {
  var random = quotes[Math.floor(Math.random() * quotes.length)];

  $("#thisquote").text(random.quote);

  $("#thisauthor").text("-" +random.author);


    if ($(quotes[random].author)  === "Kramer") {
      $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/kramer.jpg'"); 
    }
    else if (quotes[random].author === "George"){
      $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/george.jpg'"); 
    }
    else if (quotes[random]["author"] === "Elaine"){
      $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/elaine.jpg'"); 
    }
    else if (quotes[random]["author"] === "Jerry"){
      $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/jerry.jpg'"); 
    }
    else{
      $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/bg.jpg'"); 
    }

};



function removeHeader() {
  $("#header").remove();
}

$('.btn').click(function() {
  removeHeader();
  randomQuote();

});
});

Answer 1

三个问题：changeBackground()在使用它的地方并不存在，并且您在第一个$(...)周围有一个额外的quotes[random].author，以及{的每个实例{1}}应该只是quotes[random].author。

所有这三个问题都在下面修复：

random.author

只是为了好玩，这可能是一种更简单（至少更短）的方式来设置你想要的背景：

function randomQuote() {
  var random = quotes[Math.floor(Math.random() * quotes.length)];

  $("#thisquote").text(random.quote);

  $("#thisauthor").text("-" +random.author);

  if (random.author  === "Kramer") {
    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/kramer.jpg'"); 
  }
  else if (random.author === "George"){
    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/george.jpg'"); 
  }
  else if (random.author === "Elaine"){
    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/elaine.jpg'"); 
  }
  else if (random.author === "Jerry"){
    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/jerry.jpg'"); 
  }
  else {
    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/bg.jpg'"); 
  }
}    

function removeHeader() {
  $("#header").remove();
}

$('.btn').click(function() {
  removeHeader();
  randomQuote();
});

Answer 2

为什么不将背景图片网址分流到引号数组？

工作示例：https://jsfiddle.net/7r3ttLst/

var quotes = [
  {
    "author": "Kramer", 
    "quote": "Kramer Quote",
    "bg": "http://wallpapercraze.com/images/wallpapers/kramer-619924.jpeg"
  },
  {
    "author": "George", 
    "quote": "Kramer Quote",
    "bg": "http://photos.oes.org/albums/userpics/10002/TickBiteHealing.jpg"
  },
  {
    "author": "Other", 
    "quote": "Other Quote",
    "bg": ""
  },
];

function randomQuote() {
    var random = quotes[Math.floor(Math.random() * quotes.length)];
    var bg = '';

    $("#thisquote").text(random.quote);
    $("#thisauthor").text("-" +random.author);

    if (random.bg.length) {
        bg = random.bg;
    } else {
        bg = 'file:C:/Users/user/Desktop/freecodecamp/random quote/images/bg.jpg';
    }

    $("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url("+bg+")"); 
}

单击时生成引用，然后根据生成的随机引用更改背景

2 个答案: