jQuery'css不是't向正文添加背景属性

jQuery's .css isn't adding background attribute to body

本文关键字:添加 背景 属性 正文 不是 css jQuery      更新时间:2023-09-26

当我试图为背景创建一个图像网格时,我需要能够通过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(){})来实现事情。

有人能看到是什么阻止了它的工作吗?

您的if条件是错误的,因此您在每8个URL之后都会遗漏,

$(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;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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