Question

我想使用jQuery onclick更改页面的背景图片，如下所示：

var colors = ['blue', 'green', 'yellow', 'black'];
$('#click').click(function(){
    $('body').css('background', colors[1]);
})

但我想使用一些简短的'jQuery`函数自动更改它，到目前为止我的尝试是这样的：

var colors = ['blue', 'green', 'yellow', 'black'];

$.each(colors, function(color){
    setTimeout(function(){$('body').css('background', color)}, 1000);
});

但它不起作用，任何帮助将不胜感激

Answer 1

你可以这样做：

var colors = ['blue', 'green', 'yellow', 'black'];

$.each(colors, function(i, color){
    setTimeout(function(){$('body').css('background', color)}, (i+1)*1000);
});

我做了两处修改：

给回调的第一个参数是索引，而不是数组的元素
我使用索引计算延迟

Answer 2

尝试

var colors = ['blue', 'green', 'yellow', 'black'],
    colorIndex = 0,
    $body = $('body');

setInterval(function(){ $body.css('background', colors[colorIndex++ % colors.length])}, 1000);

http://jsfiddle.net/gaby/8uZga/

演示

在循环中更改背景图像

2 个答案: