jQuery的.css并没有为body添加背景属性

时间:2014-10-25 01:40:48

标签: javascript jquery css

当我尝试为我的背景创建一个图像网格时,我需要能够通过jQuery将background-image属性添加到body的css中,但它不是工作。以下代码返回正确的值,但我在最后看到的只是一个空白页。

<body>
<script>

$('body').css('background-image', function() {

    var position = 0,
        image = '';

    for(var x=1; x<=4; x++) {
        // 4 rows

        for(var y=1; y<=8; y++) {
            // 8 columns

            position++;

            image += 'url(img/bg/' + position + '.jpg)'; 
            if(x<=4 && y<8) { image += ','; } 

        }

    }

    console.log(image);
    return image;

});


</script>

正如您所看到的,我在创建body标记后正在编写脚本,所以我的理解是我不需要$(function(){})来实现目标。

任何人都可以看到是什么阻止了这项工作吗?

1 个答案:

答案 0 :(得分:1)

您的if条件有误,因此您每隔8个网址就会遗漏,

&#13;
&#13;
$(function() {
  $('body').css('background-image', function() {

    var position = 0,
      image = '';

    for (var x = 1; x <= 4; x++) {
      // 4 rows

      for (var y = 1; y <= 8; y++) {
        // 8 columns

        position++;

        image += 'url(img/bg/' + position + '.jpg)';
        if (x < 4 || y < 8) {
          image += ',';
        }

      }

    }

    console.log(image);
    return image;

  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

我喜欢这样做的方法是将元素推送到数组,然后使用array.join(',')构造字符串。