Question

首先，我知道重复问题是多么令人沮丧，所以请不要认为我这样做，因为Stackoverflow上有很多答案。出于某种原因，我无法让他们工作。这是完整的JQuery，HTML。（我在当地这样做。）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Wed, 06 Aug 2014 13:13:03 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
  $('.day-1').css('background-image', function(){

  var url, hour = new Date().getHours();
  if (hour > 7 && hour < 20) {
    return 'images/bg_daytime.png';
   } else {
    return 'images/bg_nighttime.png';
   }
  });
});
</script>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

<body>
<div class="DateDiv">
    <img class="day-1" src="img/day-1.jpg" width="250" height="252">
</div>

  </body>
</html>

现在我从逻辑上知道有一种方法可以通过替换图像名称来更聪明。我的最终目标是倒计时到特定日期的天数。用这个数字替换图像名称会很好，例如：剩下25天，图像名称变为图像/ day-25.jpg

虽然我正在寻找答案，但我想学习所以任何逻辑帮助都是惊人的：）

你真诚的，

JQuery Noob。

----编辑并添加了JQuery函数的代码--------

$(document).ready(function () {
$('.day-1').parent().css('background-image', function () {
    var hour = new Date().getHours();
    var imagename = new Date().getDate();
    var daysuntil = 30 - imagename;
    var imagefullname = 'images/' + daysuntil + '.jpg'
    var numberofdays = '<h2>' + daysuntil + ' Days Remaining</h2>'

    $('.day-1').attr('src', imagefullname);
    $('.day-text').append(numberofdays);
 });

}）

Answer 1

我假设你想要改变“day-1”图像背后的背景图像。在这种情况下，这里有一些问题。

首先，您需要为.day-1选择器定位parent()容器。其次，background-image css属性应该包含在url()。

中

$(document).ready(function () {

    $('.day-1').parent().css('background-image', function () {
        var hour = new Date().getHours();
        if (hour > 7 && hour < 20) {
            return "url('http://www.mrwallpaper.com/wallpapers/sunny-day-landscape.jpg')";
        } else {
            return "url('http://fc01.deviantart.net/fs70/i/2012/178/e/3/a_dark_starry_night_wallpaper_by_s3vendays-d151qon.jpg')";
        }
    });

});

如果您只想更改day-1图片的来源位置，可以使用attr()方法，如下所示：

$('.day-1').attr('src', 'img/day-2.jpg');

显示基于今天的图像 - 日期（）

1 个答案: