1

ウィンドウが更新されるたびに、jQuery を使用して、Web ページに背景画像をランダムに割り当てています。各背景に対応するテキストの色を割り当てたいと思います。

私はこのコードを試していますが、運がありません:

$(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 を返します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各要素が実際に「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]
});
于 2013-06-26T18:54:51.943 に答える
0

console.log($('body').css('background-image'))これを返すものを確認してみてください。img /5.jpgの代わりにurl(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 に答える