Question

我希望页面背景更改为随后显示的随机引号的背景图像。如果我拿出那个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

你不应该这样做......它真的很重，你不能轻易改变引号的顺序......如果你的引号数组是一个引号对象数组会更好。每个引用都有一个text属性和类属性：

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规则。为您管理将更快更容易。

Answer 2

$(document).ready(function() {
  

  $('#random-quote').click(function() {
    var quotes = [
{"quote": "It's not the years, honey. It's the mileage.", "background": "/images/bg1.jpg"},
{"quote": "Quote 2.", "background": "/images/bg2.jpg"},
{"quote": "Quote 3.", "background": "/images/bg3.jpg"}
];
    
    var randomIndex = Math.floor(Math.random() * quotes.length);
    var selectedQuote = quotes[ randomIndex ];

    $('#main-quote').text( selectedQuote.quote );
    var selectedBG = selectedQuote.background;
    console.log( selectedBG );
    // $("body").css("background-image", "url('"+selectedBG+"')");
  });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-quote"></div>
<button id="random-quote">Random Quote</button>

Answer 3

不要使用字符串数组。而是使用对象数组如下面的showen

  var quotes = [
      {
          text:"It's not the years, honey. It's the mileage.",
          background: "url(https://images2.alphacoders.com/865/86520.jpg) no-repeat;"
      },
      {
          text:"You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig.",
          background: "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;"
      },
      {
          text:"May the Force be with you.",
          background: "url(http://wallpapercave.com/wp/oj4WPgT.png) no-repeat;"
      }
  ];

这里是小提琴。你可以编辑它来满足你的需求

FIDDLE

根据文本更改背景

3 个答案: