javascript - 根据文本更改背景

Question

fiddle :https://jsfiddle.net/hanyb9da/

我希望页面背景更改为与显示的随机报价相匹配的背景图像。如果我去掉那个 changeBack 函数，引号就起作用了，如你所见 here .

我所做的是创建一个 for 循环并尝试使用 jQuery 根据数组中的引号更改背景，但它没有用。

完整的 js:

$(document).ready(function() {
  var quotes = [
    "It's not the years, honey. It's the mileage.",
    "You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig.",
    "I'll make him an offer he can't refuse.",
    "May the Force be with you.",
    "We buy things we don't need with money we don't have to impress people we don't like.",
    "Bond, James Bond.",
    "Heeere's Johnny!",
    "Hasta la vista, baby.",
    "Zed's dead, baby. Zed's dead."
  ];

  function getQuote() {
    return Math.floor(Math.random() * quotes.length);

  }

  $('#random-quote').click(function() {
    $('#main-quote').text(quotes[getQuote()]);
  });

  function changeBack() {
    var which = quotes.length;
    for (i = 0, i < which, i++) {
      if (which[i] === quotes[0]) {
        $("body").css("background-image", "url(https://images2.alphacoders.com/865/86520.jpg) no-repeat;");
      };
      else if (which[i] === quotes[1]) {
        $("body").css("background-image", "url(https://images3.alphacoders.com/238/238127.jpg) no-repeat;");
      };
      else if (which[i] === quotes[2]) {
        $("body").css("background-image", "url(http://g01.a.alicdn.com/kf/HTB1uqc0KVXXXXbsapXXq6xXFXXXC/Living-room-home-wall-decoration-fabric-poster-The-font-b-Godfather-b-font-font-b-movies.jpg) no-repeat;");
      };
      else if (which[i] === quotes[3]) {
        $("body").css("background-image", "url(https://stiggyblog.files.wordpress.com/2012/12/star-wars-a-new-hope-1977-factors-commercial-poster-by-hildebrandt.jpg) no-repeat;");
      };
      else if (which[i] === quotes[4]) {
        $("body").css("background-image", "url(http://wallpapercave.com/wp/oj4WPgT.png) no-repeat;");
      };
      else if (which[i] === quotes[5]) {
        $("body").css("background-image", "url(http://www.fotoloncho.com/fotos3/Revista%20Bond%201.jpg) no-repeat;");
      };
      else if (which[i] === quotes[6]) {
        $("body").css("background-image", "url(http://65.media.tumblr.com/ea930b76c8d84d9298910986efbb8082/tumblr_ngh0ohinb51rp2eyqo1_500.png) no-repeat;");
      };
      else if (which[i] === quotes[7]) {
        $("body").css("background-image", "url(http://imgs.abduzeedo.com/files/francois/mysterybox/terminator_1.jpg) no-repeat;");
      };
      else(which[i] === quotes[8]) {
        $("body").css("background-image", "url(http://1.bp.blogspot.com/-nIZXRMrbV5w/U5aannDQ7-I/AAAAAAAAMoQ/B81iFTid3rM/s1600/PULP+FICTION+-+UK+Poster+1.jpeg) no-repeat;");
      };


    };

  };

});

谢谢!

Answer 1

你不应该那样做......它真的很重而且你不能轻易改变你的引号顺序......如果你的引号数组是一个引号对象数组会更好。每个引号都有一个文本属性和一个类属性，如下所示:

var quotes = [
  {text: "It's not the years, honey. It's the mileage.", className: "years"},
  {text: "May the Force be with you.", className: "starwars"}// etc...
];

之后，您只需根据引用的类更改元素的类名。然后在 css 文件中管理背景图像。希望对您有所帮助。

编辑:每次您想添加新引号时，您只需在数组中添加新引号和新的 css 规则。您的管理会更快、更容易。