Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 基于文本更改背景_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 基于文本更改背景

Javascript 基于文本更改背景,javascript,jquery,html,css,Javascript,Jquery,Html,Css,小提琴: 我希望页面背景更改为与显示的随机引号一起显示的背景图像。正如你所看到的,如果我去掉转换函数,引号就会起作用 我所做的是创建一个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

小提琴:

我希望页面背景更改为与显示的随机引号一起显示的背景图像。正如你所看到的,如果我去掉转换函数,引号就会起作用

我所做的是创建一个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;");
      };


    };

  };

});
$(文档).ready(函数(){
变量引号=[
“亲爱的,这不是岁月,而是里程。”,
“你看,在这个世界上有两种人,我的朋友:一种是带着子弹的人,另一种是挖东西的人。你挖。”,
“我会给他一个他无法拒绝的提议。”,
“愿原力与你同在。”,
“我们用钱买我们不需要的东西,我们不必给我们不喜欢的人留下深刻印象。”,
“邦德,詹姆斯·邦德。”,
“嘿,是约翰尼!”,
“哈斯塔·拉维斯塔,宝贝。”,
“泽德死了,宝贝,泽德死了。”
];
函数getQuote(){
返回Math.floor(Math.random()*quotes.length);
}
$(“#随机引号”)。单击(函数(){
$(“#主引号”).text(引号[getQuote()]);
});
函数转换(){
var=quotes.length;
对于(i=0,i

谢谢

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

var引号=[
{文本:“亲爱的,这不是年份。这是里程数。”,类名:“年份”},
{文本:“愿原力与你同在。”,类名:“星球大战”}//等等。。。

];你不应该那样做。。。它真的很重,你不能轻易改变你的报价顺序。。。如果您的quotes数组是quotes对象数组,则效果会更好。每个引号都有一个文本属性和一个类属性,如下所示:

var引号=[
{文本:“亲爱的,这不是年份。这是里程数。”,类名:“年份”},
{文本:“愿原力与你同在。”,类名:“星球大战”}//等等。。。
];
$(文档).ready(函数(){
$(“#随机引号”)。单击(函数(){
变量引号=[
{“quote”:“这不是年份,亲爱的。这是里程数。”,“背景”:“/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];
$(“#主引号”).text(selectedQuote.quote);
var selectedBG=selectedQuote.background;
console.log(selectedBG);
//$(“body”).css(“背景图像”、“url”(““+selectedBG+”)”);
});
});

随机报价
$(文档).ready(函数(){
$(“#随机引号”)。单击(函数(){
变量引号=[
{“quote”:“这不是年份,亲爱的。这是里程数。”,“背景”:“/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];
$(“#主引号”).text(selectedQuote.quote);
var selectedBG=selectedQuote.background;
console.log(selectedBG);
//$(“body”).css(“背景图像”、“url”(““+selectedBG+”)”);
});
});


随机引号
不要使用字符串数组。而是使用对象数组 就像下面的秀文

  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;"
      }
  ];
这是小提琴。你可以编辑它来满足你的需要


不要使用字符串数组。而是使用对象数组 就像下面的秀文

  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;"
      }
  ];
这是小提琴。你可以编辑它来满足你的需要


这与您的问题无关,但for(i=0
正在创建一个全局变量。
which[i]
的结果应该是什么?
which
是一个数字(
var=quotes.length;
)O这与您的问题无关,但与(i=0
正在创建一个全局变量。
which[i]
的结果应该是什么?
which
是一个数字(
var which=quotes.length;
)O.w为什么要使用两个单独的数组?),引号起作用,但背景不变