1

每次刷新窗口时，我都使用 jQuery 为我的网页随机分配背景图像。我想为每个背景分配一个相应的文本颜色。

我正在尝试使用此代码，但没有运气：

$(document).ready(function () {
    var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];

    $('body').css({
        'background-image': 'url(img/' + images[Math.floor(Math.random() * images.length)] + ')'
    });

    if ($('body').css('background-image') === 'img/5.jpg') {
        $('#intro').css('color', 'red!important');
    };
});
4

4 回答 4

2

.css('background-image')返回一个用url(). 我会改用一个对象数组：

var themes = [{
    image: '1.jpg',
    color: 'red'
}, {
    image: '2.jpg',
    color: 'orange'
}];

现在，您可以执行以下操作：

var theme = themes[Math.floor(Math.random() * themes.length)];

$('body').css({
    'background-image': 'url("img/' + theme.image + '")',
    'color': theme.color
});
于 2013-06-26T18:54:54.867 回答
0

为什么不更新您的images数组，以便每个元素实际上是一个“背景/文本颜色”数组 - 像这样：

var images = [['1.jpg', '#000'], ['2.jpg', '#111'], ['3.jpg', '#222'], ['4.jpg', '#333'], ['5.jpg', '#444'], ['6.jpg', '#555']];
var random = Math.floor(Math.random() * images.length)]
$(body).css({
    'background-image': 'url(img/' + images[random][0] + ')',
    'color':            images[random][1]
});
于 2013-06-26T18:54:51.943 回答
0

试着console.log($('body').css('background-image'))看看是什么返回了这个。我认为这是返回类似url(img/5.jpg)而不是img/5.jpg

如果将随机事物设置为变量然后与该变量而不是css属性进行比较，也可能更容易

于 2013-06-26T18:55:01.120 回答
0

这是我的做法：

var styles = [
    { image: '1.jpg', color: 'blue' },
    { image: '2.jpg', color: 'green' },
    ...
];

var style = styles[Math.floor(Math.random() * styles.length)];
$(body).css{ 'background-image': 'url(img/' + style.image + ')',
             'color': style.color + '!important' });

但是，您的代码的基本问题是，url(...)与现有样式相比，您忘记了，它应该是：

if ($('body').css('background-image') === 'url(img/5.jpg)') {
于 2013-06-26T18:55:43.993 回答