Question

每次刷新窗口时，我都会使用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');
    };
});

Answer 1

.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
});

Answer 2

为什么不更新你的images数组，以便每个元素实际上是一个`background / text-color'数组 - 就像这样：

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]
});

Answer 3

尝试将console.log($('body').css('background-image'))放入以查看返回此内容的内容。我认为这会返回类似 url（img / 5.jpg）而不是 img / 5.jpg

如果将随机事物设置为变量，然后与该变量进行比较而不是css属性，那么

也可能更容易

Answer 4

我将如何做到这一点：

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)') {

Jquery：将文本颜色链接到随机背景图像

4 个答案: