当我尝试为我的背景创建一个图像网格时,我需要能够通过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(){})
来实现目标。
任何人都可以看到是什么阻止了这项工作吗?
答案 0 :(得分:1)
您的if
条件有误,因此您每隔8个网址就会遗漏,
。
$(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;
我喜欢这样做的方法是将元素推送到数组,然后使用array.join(',')
构造字符串。